Echarts介绍
-
D3.js是web端评价最高的JavaScript可视化工具库；
-
ECharts.js是百度开发一个开源JavaScript可视化工具库；
-
Highcharts.js是国外的一款可视化库，非商用免费，被许多国外大公司使用；
-
AntV是蚂蚁金服全新一代数据可视化解决方案；
-
Highcharts.js与ECarts.js是office和wps的关系。
翻译翻译
-
Echarts是一个js插件，用来做好看图表的；
-
性能好，可流畅运行于移动端和pc端；
-
兼容主流浏览器；
-
提供很多常用图表，且可定制。
图表应用场景
公司销售业绩，与往年的数据相比较，一年来各个季度的数据比较，一周内每天的销售额度 柱状图或折线图
班级及格，不及格，良好，优秀的比例展示 扇形图（饼图）
除此以外，还有散点图，k线图等
ECharts安装
方式一 CDN
<script src='https://www.jsdelivr.com/package/npm/echarts'></script>
方式二 npm
npm i echarts
## 安装完毕后，如上引入即可。
Echarts使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 1.安装并引入echarts--><script src="../node_modules/echarts/dist/echarts.min.js"></script><style>#main {width: 100vw;height: 100vh}</style></head><body><!--2.准备容器,此容器必须设置宽度和高度--><div id="main"></div><script>// 3.初始化echarts实例对象const main = document.getElementById('main')const myChart = echarts.init(main)// 4.指定配置项和数据const option={xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{},series:[{data:[123,246,358,425,522,955,24],type:'line'//bar}]}// 5.将配置项设置给EchartsmyChart.setOption(option)</script></body></html>
Echarts概念
设置容器大小
在Echarts使用过程中，必须给容器设置宽高，推荐使用css去设置此样式。
浏览器窗口大小发生变化重启echarts
window.οnresize=function () {
myChart.resize()
}
通过监听页面的window.onresize事件，获取浏览器大小改变的事件，然后调用myChart.resize()方法来重置宽高。
设置主题（换皮肤）
ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：
var chart = echarts.init(dom, 'dark');
如果上述黑暗主题不满足你的需求，还可以进入主题下载 - Apache ECharts下载其他内置theme，如果都不满足， 还可以自己定制，然后下载js文件，使用方法如下：
<script src="echarts.js"></script><!-- 引入 vintage 主题 --><script src="theme/vintage.js"></script><script>// 第二个参数可以指定前面引入的主题var chart = echarts.init(document.getElementById('main'), 'vintage');chart.setOption({...});</script>
2209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
