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.将配置项设置给Echarts
myChart.setOption(option)
</script>
</body>
</html>
Echarts概念
设置容器大小
在Echarts使用过程中，必须给容器设置宽高，推荐使用css去设置此样式。
浏览器窗口大小发生变化重启echarts
window.onresize=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>
标签：myChart,js,Echarts,可视化,main,echarts From： https://www.cnblogs.com/0416HF/p/16770906.html