Vue中使用echarts

柱形图

图片1.png

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

 <div :id="id" class="orderArea orderbarArea"></div>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<script>
    import echarts from 'echarts'
    import echartsTheme from "cps/echarts/theme/westeros.json";
    export default {
        name:'barChat',
        data(){
            return {
                 id:'barChart',
                 myChart:null,
            }
        },
        mounted(){
            this.loadChart();
        },
        beforeDestroy() {
            if (!this.myChart) {
                return
            }
            this.myChart.dispose();
            this.myChart = null;
        },
        methods: {
            loadChart(){
                this.$nextTick(() => {
                    echarts.registerTheme('westeros', echartsTheme)
                    this.myChart = echarts.init(document.getElementById(this.id),'westeros');
                    this.myChart.setOption(this.initOption());
                })
            },
            initOption(){
                let option = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['访问量','下载量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'访问量',
                            type:'bar',
                            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            }
                        },
                        {
                            name:'下载量',
                            type:'bar',
                            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint : {
                                data : [
                                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                                ]
                            }
                        }
                    ]
                };
                return option;
            },
        },
        watch: {
        }
    }
</script>

饼状图

图片2.png

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<div :id="id" class="orderArea"></div>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<script>
    import echarts from 'echarts'
    import echartsTheme from "cps/echarts/theme/westeros.json";
    
    export default {
        data(){
            return {
                 id:'ordertype',
                 myChart:null,
            }
        },
        props: ['type'],
        mounted(){
            this.loadChart();
        },
        beforeDestroy() {
            if (!this.myChart) {
                return
            }
            this.myChart.dispose();
            this.myChart = null;
        },
        methods: {
             loadChart(){
                this.$nextTick(() => {
                    echarts.registerTheme('westeros', echartsTheme)
                    this.myChart = echarts.init(document.getElementById(this.id),'westeros');
                    this.myChart.setOption(this.initOption(this.type));
                })
            },
            initOption(type){
                let text,legend_data,series_data;
                if(type == "ordertype"){
                    text = "用户投资类型";
                    legend_data = ['基金','股票','债券','储蓄','期货'];
                    series_data = [
                        {value:335, name:'基金'},
                        {value:310, name:'股票'},
                        {value:234, name:'债券'},
                        {value:135, name:'储蓄'},
                        {value:1548, name:'期货'}
                    ]
                }else{
                    text = "用户投资区域";
                    legend_data = ['华东区','华南区','华中区','华北区','西南区','东北区','台港澳'];
                    series_data = [
                        {value:335, name:'华东区'},
                        {value:310, name:'华南区'},
                        {value:234, name:'华中区'},
                        {value:835, name:'华北区'},
                        {value:1548, name:'西南区'},
                        {value:335, name:'东北区'},
                        {value:454, name:'台港澳'}
                    ]
                }
                let data = {
                      title : {
                        text: text,
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legend_data
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '50%',
                            center: ['50%', '60%'],
                            data:series_data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                return data;
            },
        },
        watch: {
            type:(v)=>{
                this.initOption(v)
            }
        }
    }
</script>

雷达图和折线图实现步骤同上。