一、什么是echarts？
echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、使用步骤
1.一般使用方式
- 在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择
dist/echarts.js，点击并保存为echarts.js文件。- 在刚才保存
echarts.js的目录新建一个index.html文件，内容如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="echarts.js"></script> </head> </html>
绘制一个简单的图表(完整代码)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="echarts.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('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> </body> </html>效果图：
2.利用动态数据渲染图表
- 从 npm 安装echarts —— npm install echarts --save
- 在相应组件中引入excharts —— import * as echarts from 'echarts';
- 在页面结构中准备一个容器，用于承载echarts实例,一定要记得指定图标的高度
- 基于准备好的实例，初始化echarts实例 —— var myChartLine = echarts.init(this.$refs.main);
- 处理数据指定配置项和数据，例如对于一个折线图来说的x,y轴数据，以及图例等
- 使用以上步骤的配置和数据显示图表 —— myChartLine.setOption(option1);
代码示例： 以下主要讲解折线图，柱状图，饼状图的实现过程。
在页面结构中准备一个容器，用于承载echarts实例
<div ref="main" style="height:280px;"></div>
基于准备好的实例，初始化echarts实例 ，并显示图表
mounted() { // 获取后端数据 getData().then((response) => { const { data } = response.data; // 获取表格的数据 this.tableData = data.tableData; // 获取折线图的数据 this.orderData = data.orderData; // 获取柱状图的数据 this.userData = data.userData; // 获取饼状图的数据 this.videoData = data.videoData; // 利用后端数据————生成echarts折线图 // 基于准备好的dom，初始化echarts实例 var myChartLine = echarts.init(this.$refs.main); // 指定图表的配置项和数据 var option1 = {}; // 提示框 option1.tooltip = {}; // 整理数据得到 x 轴所要显示的数据 const xAxis = this.orderData.date; option1.xAxis = { data: xAxis }; // 整理数据得到 y 轴所要显示的数据 option1.yAxis = {}; // 整理数据得到图例 const legend = Object.keys(this.orderData.data[0]); option1.legend = { data: legend }; // 整理数据得到 每一个节点的值 option1.series = [] legend.forEach((key) => { option1.series.push({ name: key, type: 'line', data: this.orderData.data.map((item) => { return item[key] }) }) }) // 使用刚指定的配置项和数据显示图表。 myChartLine.setOption(option1); // 利用后端数据————生成echarts 柱状图 var myChartBar = echarts.init(this.$refs.main1); var option2 = { legend: { // 图例文字颜色 textStyle: { color: "#333", }, }, // grid 组件离容器左侧的距离。 grid: { left: "20%", }, // 提示框 tooltip: { trigger: "axis", }, xAxis: { type: "category", // 类目轴 data: this.userData.map((item) => { return item.date; }), // 坐标轴轴线相关配置 axisLine: { lineStyle: { color: "#17b3a3", }, }, // 坐标轴刻度标签的相关设置 axisLabel: { // 坐标轴刻度标签的显示间隔，在类目轴中有效 interval: 0, color: "#333", }, }, yAxis: [ { type: "value", axisLine: { lineStyle: { color: "#17b3a3", }, }, }, ], color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"], series: [ { name: '新增用户', type: 'bar', data: this.userData.map(item => item.new) }, { name: '活跃用户', type: 'bar', data: this.userData.map(item => item.active) } ], }; // 使用刚指定的配置项和数据显示图表。 myChartBar.setOption(option2); // 利用后端数据————生成echarts 柱状图 var myChartPie = echarts.init(this.$refs.main2); var option3 = { tooltip: { trigger: "item", }, color: [ "#0f78f4", "#dd536b", "#9462e5", "#a6a6a6", "#e1bb22", "#39c362", "#3ed1cf", ], series: [ { type: 'pie', // data: [ // { value: 1048, name: 'Search Engine' }, // { value: 735, name: 'Direct' }, // { value: 580, name: 'Email' }, // { value: 484, name: 'Union Ads' }, // { value: 300, name: 'Video Ads' } // ], // 如上所示，饼状图的数据格式和后端返回数据相同，因此可以直接使用 data: this.videoData } ], }; // 使用刚指定的配置项和数据显示图表。 myChartPie.setOption(option3); }) },
效果图
