echarts基本介紹

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

項(xiàng)目中使用echarts步驟

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

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

3.在需要用到echarts圖的頁(yè)面中寫好放圖的盒子，要注意的是盒子必須要有寬高

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

4.通過js文件來配置echarts圖的各種數(shù)據(jù)

export const option = {
     series : [
        {
          name: '訪問來源',
          type: 'pie',
          radius: '55%',
          data:[
              {value:235, name:'視頻廣告'},
              {value:274, name:'聯(lián)盟廣告'},
              {value:310, name:'郵件營(yíng)銷'},
              {value:335, name:'直接訪問'},
              {value:400, name:'搜索引擎'}
          ]
        }
    ]
  }

在需要的頁(yè)面引入js文件以及使用其中的配置

image.png

5.頁(yè)面效果

image.png