爲了參加一個比賽，就倒騰了echarts怎樣使用，對於其中的一些小技巧，記錄下來，一以便在以後的使用中能夠更加的方便，這就是一個積累的過程，而不是如這次一般 ，滿世界的去尋找相應的設置方法，而其中學期最好的還是官方的教程，但是，官方的教程、api等太多，而以自己喜歡的方法，掌握的東西，這樣的記錄，更加的明白自己掌握的及之後的前進。
成型的東西如下：不是很好，但在視覺上還是值得一看。
這其中，有很多需要調整的一些地方，雖說入門簡單，但是調整的東西也不算少。
接下來，我就記錄一下，我下做這個的時候，遇到的一些小技巧。
var myChart = echarts.init(document.getElementById('second'));
//初始化，創建一個容器
var option = {}//設置配置項
myChart.setOption(option);
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
//將設置好的配置項配置在容器裏
這是一個完成一個基本的echarts該有的三步，其中最爲繁瑣的就是option裏面的東西。
以地圖爲例：其實，不難，一看就能看出來。
var option = {
title: {
text: '貴州省2018年常駐人口',
subtext: '2018年貴州省常駐人口總數爲:3600萬人',
textStyle: {//設置標題的顏色和字體大小
color: "#ffffff",
fontSize: 20
},
subtextStyle: {//設置副標題字體大小
fontSize: 17
},
top: "5%",//標題顯示的位置top,bottom，left,right
left: 'center',
},
visualMap: {//設置在地圖上通過一個小圖標能夠更加的容易的觀察
min: 200,//小圖標的最小值
max: 700,//小圖標的最大值
text: ['High', 'Low'],
textStyle: {
color: '#ffffff'
},
realtime: false,
calculable: true,//能否可以拖拽
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']//設置小圖標的三種顏色
}
},
tooltip: {//能在顯示地圖上顯示提示
trigger: 'item',
//'item'：數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
//'axis':座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
//'none':什麼都不觸發。
formatter: '{b}<br/>{c} 萬人'
//提示框浮層內容顯示出來的格式，支持字符串模板和回調函數兩種形式。
//模板變量有 {a}, {b}，{c}，分別表示系列名，數據名，數據值等
},
grid: {//調整整個地圖在頁面上的大小、高矮
top: 0,
bottom: 0,
},
//要有series才能顯示出要顯示出的東西
series: [{
name: '數據名稱',
type: 'map',
mapType: '貴州',//可以是其他省，國家，全世界
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {//高亮
label: {
show: true,
}
}
},
//要顯示的數據
data: [{
name: '貴陽市',
value: 488.19
},
{
name: '遵義市',
value: 627.07
},
{
name: '六盤水市',
value: 293.73
},
{
name: '畢節市',
value: 668.61
},
{
name: '銅仁市',
value: 316.88
},
{
name: '安順市',
value: 235.31
},
{
name: '黔西南州',
value: 287.317
},
{
name: '黔東南州',
value: 353.83
},
{
name: '黔南州',
value: 329.21
},
]
}]
};
柱狀圖：
//legend裏面的‘高等教育毛入學率’和series裏面的name要一致，不然不能顯示出來選項的legend
legend: {
data: ['高等教育毛入學率（%）', '出生率(%)', '死亡率(%)', '農林牧漁業增加值(%)'],
textStyle: {
color: "#ffffff"
},
x: "center",
itemGap: 8,
y: "85%"
},
toolbox: {//工具箱
show: true,//顯示工具箱
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},//能夠調整爲折線圖和餅圖
restore: {},//刷新
saveAsImage: {}//保存圖片
}
},
grid: {
top: '12%',
left: '3%',
right: '4%',
bottom: '20%',
containLabel: true
},
xAxis: [{//x軸
type: 'category',
boundaryGap: false,
data: ['2013年', '2014年', '2015年', '2016年', '2017年'],
axisLabel: {//調整軸上的顏色
show: true,
textStyle: {
color: '#fff'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
}],
series: [{
name: '高等教育毛入學率（%）',
type: 'line',
stack: '總量',
areaStyle: {},
data: [27.4, 29.4, 31.2, 33.0, 34.0]
},
{
name: '出生率(%)',
type: 'line',
stack: '總量',
areaStyle: {},
data: [13.05, 12.98, 13, 13.43, 13.98]
},
{
name: '死亡率(%)',
type: 'line',
stack: '總量',
areaStyle: {},
data: [6.93, 6.96, 7.15, 7.18, 7.2]
},
{
name: '農林牧漁業增加值(%)',
type: 'line',
stack: '總量',
areaStyle: {
normal: {}
},
data: [5.8, 6.5, 6.4, 5.9, 6.2]
},
]
};
series: [{
name: 'GDP(億元)',
type: 'bar',
itemStyle: { //配置樣式，設置每個柱子的顏色
normal: {
color: '#4D4DB3'
}
}
},
}
itemStyle: { //配置樣式，設置每個柱子的顏色
normal: {
color: '#FFCC00',
lineStyle: {
width: 6, //折線寬度
color: '#3199DF', //折線顏色
}
}
},
barWidth: 30,//設置柱狀圖的寬度
可以在 https://github.com/perseverancebg/Visualizing.git或者是https://download.csdn.net/download/wen123abx/11800522下載源碼。