vue项目中如何使用echart

1. 获取echarts

• 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
• 在 ECharts 的 GitHub 获取。
• 通过 npm 获取 echarts，本文中采用此方式

 npm install echarts

2. 引入echarts
   在main.js中引入echarts，并挂载到全局

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

3. 使用echarts

HTML代码部分:

<template>
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div  style="width: 600px;height:400px;" 
    ref="main"></div>
</template>

JS代码部分:

<script >        
// 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(this.$refs.main);        // 指定图表的配置项和数据       
var option = {            
       title: {text: 'ECharts表格'    },            
       tooltip: {},
       legend: {data:['销量']},                 
       xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},             
       yAxis: {},            
       series: [{
       name: '销量',                
       type: 'bar',                
       data: [5, 20, 36, 10, 10, 20]            }]        
    };       
 // 使用刚指定的配置项和数据显示图表。        
 myChart.setOption(option);     
</script>

4. 效果
   
5. 常见效果图
   柱状图:
   
   折线图:
   
   中国地图:

环状图:

6. 配置教程请参考官网:

https://echarts.apache.org/examples/zh/index.html