ECharts使⽤教程（图⽂教程--版本4.6.0）
武汉加油----冲鸭，雄起
成都兄弟挺你！
⽂章⽬录
⽂中项⽬参考：
1. ECharts概述
1.1 ECharts介绍
ECharts，⼀个使⽤ JavaScript 实现的开源可视化库，可以流畅的运⾏在 PC 和移动设备上，
兼容当前绝⼤部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），
底层依赖⽮量图形库 ZRender，提供直观，交互丰富，可⾼度个性化定制的数据可视化图表。
丰富的可视化类型
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，⽤于统计的盒形图，
⽤于地理数据可视化的地图、热⼒图、线图，
⽤于关系数据可视化的关系图、treemap、旭⽇图，
多维数据可视化的平⾏坐标，还有⽤于 BI 的漏⽃图，仪表盘，并且⽀持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了⾃定义系列，只需要传⼊⼀个renderItem函数，
就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使⽤⽽不需要操⼼其它事情。
你可以在下载界⾯下载包含所有图表的构建⽂件，如果只是需要其中⼀两个图表，⼜嫌包含所有图表的构建⽂件太⼤，
也可以在在线构建中选择需要的图表类型后⾃定义构建。
1.2 安装使⽤
直接从 下载整个项⽬⽂件，然后从echarts-4.6.0/dist
⽂件夹中获取构建好的 echarts，这都可以直接在浏览器端项⽬中使⽤。这些构建好的 echarts 提供了下⾯这⼏种定制：
完全版：echarts/dist/echarts.js，体积最⼤，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常⽤版：echarts/dist/echartsmon.js，体积适中，包含常见的图表和组件，所包含内容参见：
echarts/echartsmon.js。
精简版：echarts/dist/echarts.simple.js，体积较⼩，仅包含最常⽤的图表和组件，所包含内容参见：echarts/echarts.simple.js。
也可以使⽤在线引⼊地址，进⼊⽹址选择要引⽤的版本即可：www.bootcdn/echarts/
1.3 ECharts语法
ECharts语法和原⽣JS保持⼀致
所有键的值除了尺⼨⼤⼩，值都要使⽤引号，键不⽤
键的名称都是原⽣JS⼀样的匈⽛利命名风格，第⼀个单词⼩写，后⾯单词的⾸字母⼤写，⽐如
myChart、setOption、itemStyle
多个系列，先写⼀个列表，然后不同系列就是⼀个字典，所有字典放在列表中
参考下⾯图⽚
1.4 option配置组件设置 + 快速查询地址
详细option配置快速查看寻⽅法：
第⼀步：打开
第⼆步：图表上⾯选择需要查询的组件，然后点击右边，查看配置项⼿册，就会跳转到option下组件详细配置页⾯
第三步：进⼊配置详情页⾯，左边格式就是option标准写法，字典⾥⾯以键值的形式，值需要使⽤引号
⽐如，title⾥⾯的text: ‘我是标题’，空的’'就是我们⾃⼰填的值，有值的就是还有其它值可以选择，title下⾯键的值还可以是字典
⽐如，title下⾯的textStyle，⽤于设置⽂字颜⾊字体风格等
第四步：option配置下⾯很多组件都是通⽤组件，如果要设置其它图形类型，需要进⼊series⾥⾯设置，⾥⾯有各种type类型，进⼊各种type⾥⾯可以详细设置每种图形的参数，⽐如折线图，绘制点的标记形状等
1.5 主题配置
ECharts可以选择不同的主题，ECharts完整项⽬⽂件中有⼀个theme⽂件夹，⾥⾯有⼤量内置主题但是默认只有dark和light可以直接在初始化实例时候使⽤
其它主题使⽤需要现引⼊主题的js⽂件，然后才能使⽤
参考案例010案例
也可以进⼊定制主题页⾯，⾃⼰定制调整后，然后下载js⽂件下来使⽤
// 主题使⽤代码⽰例
<script src="echarts.js"></script>
<!--引⼊ vintage 主题-->
jquery是什么功能组件<script src="theme/vintage.js"></script>
<script>
// 第⼆个参数可以指定前⾯引⼊的主题
var chart = echarts.ElementById('main'),'vintage');
chart.setOption({
...
});
</script>
主题样式选择

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。