关于Echarts的使用和遇到的问题
对于插件工具,感觉按着官方的教程,便可以使用,但是看这个Echarts有点晕乎乎的,还是不能快速的学习啊。
一、在webpack中使用ECharts
项目中报了这样的错误:
//通过 npm 获取 echarts
npm install echarts --save
在项目里需要用到的界面中,按需引入需要的模块,不做全局引入;如果完整引入Echarts,会有很多冗余的文件,体积会比较大,造成资源加载等问题。(注:require和import的引入区别)
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts";
//引入折线图
import "echarts/lib/chart/line";
//引入提示框
import "echarts/lib/component/tooltip";
//引入标题
import "echarts/lib/component/title";
//引入图例标志
import "echarts/lib/component/legend";
// 上代码
// vue项目中也可以这么写:
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
// 代码
<div
class="statisticsLineEchart"
ref="lineEchart"
></div>
//获取到准备绘制的DOM对象
const ele = this.$refs["lineEchart"];
//初始化echarts实例
this.echart = ECharts.init(ele);
//绘制表格
this.echart.setOption(this.lineEchartOptions);
二、配置选项
lineEchartOptions = {
color: ["#FFC44F", "#d14a61", "#76D1D7"],//设置颜色
title: { //标题,按需引入其模块,包含表的主标题和副标题的相关配置},
tooltip: { //提示,鼠标滑过,鼠标移上去那个提示框的配置},
legend: {//图例,如果想要图例有效果,legend中数据要和series中name的值保持一致
data:["新增","删除"]
},
grid: {//网格 },
toolbox: {//工具箱,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具},
xAxis: {//x轴},
yAxis: { //y轴},
series: [{ //数据
} ]
};