echarts官网： https://echarts.apache.org/zh/index.html

按需加载模块： https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

更多配置可在配置项中查看

在vue中使用echarts:

安装echarts： **npm install echarts --save**

使用：
.vue页面

  1. <template>
  2.     <div>
  3.         <el-col id="main" :span="24" style="height: 250px;"></el-col>
  4.     </div>
  5. </template>
  7. <script>
  8.     // 这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。
  10.     // 引入基本模板
  11.     let echarts = require('echarts/lib/echarts');
  13.     // 引入柱状图组件
  14.     require('echarts/lib/chart/bar');
  16.     // 引入饼图组件
  17.     require("echarts/lib/chart/pie");
  19.     // 引入提示框和title组件
  20.     require('echarts/lib/component/tooltip');
  21.     require('echarts/lib/component/title');
  22.     require("echarts/lib/chart/line");
  24.     // 引入legend组件
  25.     require("echarts/lib/component/legend");
  27.     require("echarts/lib/component/dataZoom");
  29.     export default {
  30.         created (){
  31.             // 基于准备好的dom，初始化echarts实例
  32.             var myChart = echarts.init(document.getElementById('main'));
  34.             // 绘制图表
  35.             myChart.setOption({
  36.                 title: {
  37.                     text: 'ECharts 入门示例'
  38.                 },
  39.                 tooltip: {},
  40.                 xAxis: {
  41.                     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  42.                 },
  43.                 yAxis: {},
  44.                 series: [{
  45.                     name: '销量',
  46.                     type: 'bar',
  47.                     data: [5, 20, 36, 10, 10, 20]
  48.                 }]
  49.             });
  50.         }
  51.     }
  52. </script>