金华市建设监理协会网站大型淘宝客返利网站建设
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，// 接受数组分别设定上右下左边距，同cssitemGap: 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，// 接受数组分别设定上右下左边距，同cssitemGap: 10, // 各个item之间的间隔，单位px，默认为10，// 横向布局时为水平间隔，纵向布局时为纵向间隔itemWidth: 20, // 图例图形宽度itemHeight: 14, // 图例图形高度textStyle: {color: '#333' // 图例文字颜色}},