《前端》Echart图表
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备具备大小（宽高）的Dom 即创建一个div，id为main，用来在html页面制作图表-->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，echarts.init用于初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
//类型：柱状图，若是饼图,type:'pie'
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>讲解：
整体步骤为：
1、创建 HTML 页面并引入echarts.min.js。
2、为ECharts 准备一个具备高宽的 DOM 容器，并设置id。
3、使用 json 格式来设置配置信息。（js部分，<script>）
（1） 初始化echarts实例，使用echarts.init.
echarts.init(document.getElementById('main')).setOption(option);
（2）标题
title: { text: '第一个 ECharts 实例' }
（3）提示信息
tooltip: {},
（4）图例组件
legend: {
data: [{
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}]
}
（5）X 轴，Y 轴
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
yAxis: {}
（6）系列列表
series: [{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
}]
每个系列通过 type 决定自己的图表类型：
- type: 'bar'：柱状/条形图
- type: 'line'：折线/面积图
- type: 'pie'：饼图
- type: 'scatter'：散点（气泡）图
- type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
- type: 'radar'：雷达图
- type: 'tree'：树型图
- type: 'treemap'：树型图
- type: 'sunburst'：旭日图
- type: 'boxplot'：箱形图
- type: 'candlestick'：K线图
- type: 'heatmap'：热力图
- type: 'map'：地图
- type: 'parallel'：平行坐标系的系列
- type: 'lines'：线图
- type: 'graph'：关系图
- type: 'sankey'：桑基图
- type: 'funnel'：漏斗图
- type: 'gauge'：仪表盘
- type: 'pictorialBar'：象形柱图
- type: 'themeRiver'：主题河流
- type: 'custom'：自定义系列
注：通过echarts.js来绘制一个饼图表，同样先初始化，然后指定饼图表配置项和数据，最后添加到html页面中，这里饼图使用的series属性，如下图所示：
也可以进行echarts的官网，可以看到通过echarts.js，可以使html制作更多的图形化表格。
相关资料
- ECharts 教程：https://www.runoob.com/echarts/echarts-tutorial.html
- ECharts 下载：https://github.com/apache/incubator-echarts
- ECharts 官网：https://www.echartsjs.com/zh/index.html
- HTML5 Canvas 教程：https://www.runoob.com/html/html5-canvas.html
- ZRender：https://www.runoob.com/w3cnote/html5-canvas-zrender.html
----------------------------------------------------------------------------------------------------------------------------------------------------
ECharts 教程 | 菜鸟教程 https://www.runoob.com/echarts/echarts-tutorial.html
html如何制作图形化表格-百度经验 https://jingyan.baidu.com/article/046a7b3e88490ef9c27fa9ce.html
下一篇： Vue基本代码和指令