Vue项目中引入Echarts可视化图

1 安装Vue-Echarts

js"> "vue-echarts": "^5.0.0-beta.0" //不同版本可能兼容性不同，我用的这个版本
 npm install  --save vue-echarts@^5.0.0-beta.0

2 在指定Vue文件中引入Echarts

vue"><script>
import Vue from "vue";
import ECharts from "vue-echarts";
import "echarts";
Vue.component("IEcharts", ECharts);
export default {

}
</script>

3 找到需要引用的Echarts图

js">option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

4 在Vue文件中引用该图

vue"><template> 
	<IEcharts :options="PieChartOption" autoresize />
</template>
<script>
import Vue from "vue";
import ECharts from "vue-echarts";
import "echarts";
Vue.component("IEcharts", ECharts);
export default {
    data(){
        return{
            pieChartData: [0, 0, 0, 0, 0], //饼状图数据源
        }
    },
computed: {
    PieChartOption() {
        return {
            title: {
                text: `${this.optCourse.course_name}-${this.optClass.name}`,
                subtext: `${this.optIndex.index_name}`,
                left: "center"
            },
            tooltip: {
                trigger: "item"
            },
            legend: {
                orient: "vertical",
                left: "left"
            },
            series: [
                {
                    name: "访问来源",
                    type: "pie",
                    radius: "50%",
                    data: [
                        { value: this.pieChartData[4], name: "60分以下" },
                        { value: this.pieChartData[3], name: "60-70分" },
                        { value: this.pieChartData[2], name: "70-80分" },
                        { value: this.pieChartData[1], name: "80-90分" },
                        { value: this.pieChartData[0], name: "90分以上" }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)"
                        }
                    }
                }
            ]
        };
    }
},
}
</script>

5 解决Vue中数组视图更新的最好办法

js">this.pieChartData=this.pieChartData.concat([])

结语

如果你发现文章有什么问题，欢迎留言指正。
如果你觉得这篇文章还可以，别忘记点个赞加个关注再走哦。
如果你不嫌弃，还可以关注微信公众号———梦码城（持续更新中）。
梦码在这里感激不尽！！