vue项目使用echarts

echarts基本介绍

[https://echarts.apache.org/zh/feature.html]

项目中使用echarts步骤

1.安装echarts
- npm install echarts -S
2.main.js文件中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在需要用到echarts图的页面中写好放图的盒子，要注意的是盒子必须要有宽高

<div id="mycharts" style="width:300px;height:400px; margin:0 auto; ">
  </div>

4.通过js文件来配置echarts图的各种数据

export const option = {
     series : [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data:[
              {value:235, name:'视频广告'},
              {value:274, name:'联盟广告'},
              {value:310, name:'邮件营销'},
              {value:335, name:'直接访问'},
              {value:400, name:'搜索引擎'}
          ]
        }
    ]
  }

在需要的页面引入js文件以及使用其中的配置

image.png

5.页面效果

image.png