vue中使用Echarts绘制饼形图

1.将echarts下载到webpack.json

npm install echarts --save

2.在vue框架main.js中引入，并将其绑定到vue实例原型上

• import Vue from "vue"
• import echarts from "echarts"
• Vue.prototype.$echarts=echarts

3.在组件中定义盒子存放图表

<template> <div class="home"> <div id="myChart" style="width: 600px;height:400px;"></div> </div> </template>

4.初始化 EChart 图表

let myChart = this.$echarts.init(document.getElementById("myChart"));

5.指定图表的配置项和数据,并将实例化的 ECharts 图表设置图标配置项，同时在 dom 中渲染图表显示

<script> export default { name: "", data() { return {}; }, props: {}, components: {}, mounted() { this.arr() }, methods: { arr() { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('box')); let arr=[400,310,235,288,2100] myChart.setOption({ title: { text: 'vue中使用echarts绘制折线图', subtext: '1111' }, series: [ { name: "访问来源", type: "pie", radius: "55%", color:["red","green","yellow","blue","pink"], background:"black", data: [ { value: arr[0], name: "视频广告" }, { value: arr[1], name: "联盟广告" }, { value: arr[2], name: "邮件营销" }, { value: arr[3], name: "直接访问" }, { value: arr[4], name: "搜索引擎" } ] } ] }); } } }; </script>