EChart简单入门
echart的安装就细不讲了，直接去官网下，实在不会的直接用cdn,省的一番口舌。
cdn.staticfile.net/echarts/4.3.0/echarts.min.js
正入话题哈
什么是EChart？
EChart 是一个使用 JavaScript 实现的开源可视化库，Echart支持多种常见的图表类型，如折线图、柱状图、饼图、散点图等，同时还支持地图的绘制和交互。Echart非常灵活和强大，并且拥有活跃的社区支持，在数据可视化领域广泛应用于各种类型的网站和应用程序中。
一.echart的语法构造搭建
第一步
在写echart之前先引入库（像vue，jq,都类似这样，应该不陌生，有点啰嗦了）
<script src="cdn或本地位置"></script>
第二步
身体body部分的搭建
1.先创个盒子吧，你想要图表有多大，就创多大，图表就是放置在这个盒子中
<div id="main" style="width: 600px;height:400px;"></div>
2.创完盒子之后呢，开始数据部分吧，怎么将数据应用到图表可视化显示出来呢？
先随便创个值例如：myChart，用myChart来上承接入echart，下接入数据，echart.init表示这是个echart表，后面(document.getElementById('main'))是填写数据位置
var myChart = echarts.init(document.getElementById('main'));
当然这只是创建echart实例的其中一种方法。
创完值 myChart 之后呢，怎么办？
就是具体的数据结构了，让我们来看看。
3.随便创个名字来承接你要的数据，数据打在这个名字里面，哦对，就打在这个里面，例如取个名字叫option来承接数据：
var option = {
title: {
text: '因蓝桥杯摆烂的第无数天'
},
tooltip: {},
legend: {
data:['销量tmd']
},
xAxis: {
data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};来我们来看看效果
写完数据之后呢？
最后一步
将更改数据填入中介
myChart.setOption(option);
整体来看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="自己研究看开头"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '因蓝桥杯摆烂的第无数天'
},
tooltip: {},
legend: {
data:['销量tmd']
},
xAxis: {
data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>总结一下：第一步引入库 <script src="cdn或本地位置"></script> 第二步创个容器对象 第三步创个承接对象 第四步创个数据对象，填入数据。 第五步 更新数据
五步万能结束，ok了，就这样了。。。。。。。。。。
就再补充点数据方面的知识吧，就是写在数据对象里面的。
二.数据
1.type
type的意思是什么？哦，对，是类型，你先要想好，你要创建的图表是个什么类型。
2.color
color也就是调色盘，想搞什么颜色就搞什么颜色。
调色盘颜色列表。如果没有设置全局颜色，则会依次循环从该列表中取颜色作为系列颜色。
说实话，没啥软用
3.title
也就是标题嘛
看下属性，旁边都有介绍：
title: {
text： //标题名字
x: 'left', // 水平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
},4.legend
翻译过来就是图标比例，像怎么布局啊，边框啊
legend: {
data: //数据显示
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
}
},