关于Echarts的使用和遇到的问题

最新推荐文章于 2024-12-22 19:01:58 发布

转载最新推荐文章于 2024-12-22 19:01:58 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/songForU/p/11419145.html

文章标签：

#javascript #webpack #ViewUI

本文详细介绍如何在Webpack环境中引入并使用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";

<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: [{ //数据
} ]
};