本篇文章记录在工作中使用echars绘图工具所用到的各个功能的配置项，及配置的API
简单echarts的使用建议直接去官网查看：https://echarts.apache.org/zh/index.html#categories
点击左上角文档有教程和官方的文档与API（中文狂喜）
名词解析
基本名词
| 名词 | 描述 |
|---|---|
| chart | 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 |
| axis | 直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型 |
| xAxis | 直角坐标系中的横轴，通常并默认为类目型 |
| yAxis | 直角坐标系中的纵轴，通常并默认为数值型 |
| grid | 直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局 |
| legend | 图例，表述数据和图形的关联 |
| dataRange | 值域选择，常用于展现地域数据时选择值域范围 |
| dataZoom | 数据区域缩放，常用于展现大量数据时选择可视范围 |
| roamController | 缩放漫游组件，搭配地图使用 |
| toolbox | 辅助工具箱，辅助功能，如添加标线，框选缩放等 |
| tooltip | 气泡提示框，常用于展现更详细的数据 |
| timeline | 时间轴，常用于展现同一系列数据在时间维度上的多份数据 |
| series | 数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据 |
图表名词
| 名词 | 描述 |
|---|---|
| line | 折线图，堆积折线图，区域图，堆积区域图。 |
| bar | 柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。 |
| scatter | 散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图 |
| k | K线图，蜡烛图。常用于展现股票交易数据。 |
| pie | 饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。 |
| radar | 雷达图，填充雷达图。高维度数据展现的常用图表。 |
| chord | 和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据 |
| force | 力导布局图。常用于展现复杂关系网络聚类布局。 |
| map | 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。 |
| heatmap | 热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。 |
| gauge | 仪表盘。用于展现关键指标数据，常见于BI类系统。 |
| funnel | 漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。 |
| evnetRiver | 事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。 |
| treemap | 矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。 |
| venn | 韦恩图。用于展示集合以及它们的交集。 |
| tree | 树图。用于展示树形数据结构各节点的层级关系 |
| wordCloud | 词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容 |
实例：
<ul style="display: none">
<li class="li1">2012-1</li>
<li class="li1">2012-2</li>
<li class="li1">2012-3</li>
<li class="li1">2012-4</li>
<li class="li1">2012-5</li>
<li class="li1">2012-6</li>
</ul>
<ul style="display: none">
<li class="li2">100</li>
<li class="li2">500</li>
<li class="li2">300</li>
<li class="li2">400</li>
<li class="li2">3000</li>
<li class="li2">3000</li>
</ul>
<ul style="display: none">
<li class="li3">500</li>
<li class="li3">400</li>
<li class="li3">300</li>
<li class="li3">200</li>
<li class="li3">100</li>
<li class="li3">3000</li>
</ul>
<ul style="display: none">
<li class="li4">10</li>
<li class="li4">50</li>
<li class="li4">30</li>
<li class="li4">40</li>
<li class="li4">30</li>
<li class="li4">30</li>
</ul>
<ul style="display: none">
<li class="li5">50</li>
<li class="li5">40</li>
<li class="li5">30</li>
<li class="li5">20</li>
<li class="li5">10</li>
<li class="li5">30</li>
</ul>
<div class="sshgData" id="sshgData"></div>
<script type="text/javascript">
var dom = document.getElementById("sshgData");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: '海关进出口数据统计',
x: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#505765'
}
}
},
legend: {
data: ['进口', '出口','环比','同比'],
x: 'center',
top: 30
},
dataZoom: [{
show: true,
realtime: true
},
{
type: 'inside',
realtime: true
}
],
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
onZero: false,
lineStyle:{type:'solid',
color:'#37A2DA',
width:'2'}
},
data: [],
axisLabel:{
textStyle:{
color:'#37A2DA'
}
}
}],
yAxis: [{
name: '进口',
type: 'value',
fontSize: 10,
axisLabel: {
margin: 1,
textStyle:{
color:'#37A2DA'
}},
axisLine: {
lineStyle:{type:'solid',
color:'#37A2DA',
width:'1'}
}
},
{
name: '出口',
nameLocation: 'end',
type: 'value',
fontSize: 10,
axisLabel: {
margin: 1,
textStyle:{
color:'#37A2DA'
}},
axisLine: {
lineStyle:{type:'solid',
color:'#37A2DA',
width:'1'}
}
}
],
series: [{
name: '进口',
type: 'line',
animation: false,
areaStyle: {},
itemStyle: {
color: 'rgb(194, 55, 51)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(194, 55, 51)'
}, {
offset: 1,
color: 'rgb(256, 256, 256)'
}])
},
lineStyle: {
width: 1
},
data: []
},
{
name: '出口',
type: 'line',
yAxisIndex: 1,
animation: false,
itemStyle: {
color: 'rgb(81, 149, 232)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(81, 149, 232)'
}, {
offset: 1,
color: 'rgb(256, 256, 256)'
}])
},
lineStyle: {
width: 1
},
data: []
},
{
name: '同比',
type: 'line',
yAxisIndex: 1,
animation: false,
itemStyle: {
color: '#8378EA'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color:'#8378EA'
}, {
offset: 1,
color: 'rgb(256, 256, 256)'
}])
},
lineStyle: {
width: 1
},
data: []
},{
name: '环比',
type: 'line',
yAxisIndex: 1,
animation: false,
itemStyle: {
color: '#fb7293'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fb7293'
}, {
offset: 1,
color: 'rgb(256, 256, 256)'
}])
},
lineStyle: {
width: 1
},
data: []
}
]
};
var ull = $(".li1");
var ul2 = $(".li2");
var ul3 = $(".li3");
var ul4 = $(".li4");
var ul5 = $(".li5");
for(var i = 0; i < ull.length; i++) {
var bb = ull.eq(i).text()
console.log(ull.eq(i).text())
option.xAxis[0].data.push(bb);
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
}
for(var i = 0; i < ul2.length; i++) {
var bb1 = ul2.eq(i).text()
console.log(ull.eq(i).text())
option.series[0].data.push(bb1);
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
}
for(var i = 0; i < ul3.length; i++) {
var bb3 = ul3.eq(i).text()
console.log(ull.eq(i).text())
option.series[1].data.push(bb3);
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
}
for(var i = 0; i < ul4.length; i++) {
var bb4 = ul4.eq(i).text()
console.log(ull.eq(i).text())
option.series[2].data.push(bb4);
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
}
for(var i = 0; i < ul5.length; i++) {
var bb5 = ul5.eq(i).text()
console.log(ull.eq(i).text())
option.series[3].data.push(bb5);
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>