ECharts使用指南

改为

之后就可以开始进入echarts的世界了

第二步，生成echarts对象：

要创建图表首先要给图表一个安置的空间，所以可以在body内嵌入一个空的

标签，赋值一个id，以用来存放图表对象，当然如果有多个图表那可以创建多个标签。参考官方的初始化方法，使用echarts.init(node)创建echarts对象，完整代码如下：

这个myChart就是重点关注对象，之后的几乎所有图表方法都跟这玩意有关。

第三步，设置配置项

echarts的需要通过一个option对象来进行配置，详细配置项见官网说明文档

以折线图为例，option的形式类似于这样：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x8yRbV3h-1615988148805)(//upload-images.jianshu.io/upload_images/5346121-1aa8b05b4427f8f3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]

option = {

xAxis: {

type: ‘category’,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

},

yAxis: {

type: ‘value’

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: ‘line’

}]

};

其中series是数据系列，可以有多个，在这个折线图中只设置了一个

至于xAxis和yAxis是echarts提供的折线图配置项，要知道所有的可设置项可查看官方文档

第四步，载入option:

如果要载入option，只需要调用setOption()就好了

myChart.setOption(option, true);

其中第二个参数为[notMerge]，当设置为false时，如果更新数据将会合并新旧数据

最后上一个完整版：

var dom = document.getElementById(“container”);

var myChart = echarts.init(dom);

option = {

xAxis: {

type: ‘category’,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]

},

yAxis: {

type: ‘value’

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: ‘line’

}]

};

myChart.setOption(option, true);

---

---

常用的option配置项和对象方法

常用的mychart对象方法

myChart.showLoading(LoadingOption);

myChart.hideLoading();

添加showLoading()到加载数据之前可以显示一个Loading的界面，防止加载时间过长，hideLoading()清除加载页面

mychart.getOption();

获取option对象的克隆版本

mychart.dispose()

mychart.clear();

前者为释放图表，释放后不可在使用

后者为清空图表内容，清空后可再添加内容

常用的配置项

图例

legend: [{

data: categories.map(function (a) {

return a.name;

})，

selected: {

‘系列1’: true,

// 不选中’系列2’

‘系列2’: false

}

}],

因为原始数据不一定符合要求，所以data数据常常使用map和回调函数返回一个字符串数组

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
[外链图片转存中…(img-sfYdyDY5-1714850617849)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！