vue請求映射數據接口實例：
<template>
<div ref="myEchart">
</div>
</template>
<script>
import echarts from 'echarts' export default { name: 'payEchart', data () { return { chart: null, dataList: [], dateStr: [] } }, mounted () { }, beforeDestroy () { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart () { this.chart = echarts.init(this.$refs.myEchart) // 把配置和數據放這里 this.chart.setOption({ title: { text: 'echart圖標題', subtext: '單位（--）', textStyle: { fontSize: 14 } }, tooltip: { trigger: 'axis' }, legend: { data: ['最高溫度', '最低溫度'] }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: this.dateStr }, yAxis: { type: 'value', minInterval: 1, boundaryGap: [ 0, 0.1 ] }, grid: { width: '80%' }, series: this.dataList }) }, queryData() { this.$api.queryData().then(res => { if (res.meta.success) { this.dataList = res.data.dataList this.dateStr = res.data.dateStr this.$nextTick(() => { this.initChart() }) ////異步更新隊列，回調函數在 DOM 更新完成后就會調用 } else { this.$Message.error(res.meta.message) } }).catch(err => { this.$Modal.error({ title: '查詢后端接口', content: err }) }) } }, created () { this.queryData() } } </script>
一、修改主標題和副標題
title : {
text: '未來一周氣溫變化', //寫入主標題
subtext: '純屬虛構', //寫入副標題
x:'left',//控制標題水平方向的位置'center' | 'left' | 'right' | {number}
y:'top',//控制標題垂直方向的位置'top' | 'bottom' | 'center' | {number}
textStyle:{
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
}, //標題字體樣式
subtextStyle{
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
}, //副標題字體樣式
},
二、修改統計圖的寬和高，以及位置和最外面的邊框
grid:{
x:'10%',//控制統計圖左上角的x坐標位置，可為數值單位是px，可用百分比
y:'10%',//控制統計圖左上角y坐標的位置，可為數值單位是px，可用百分比
width:'80%',//控制統計圖的寬度
height:'90%',//控制統計圖的高度
borderWidth:0,//控制邊框的線條粗細，為0則不顯示
borderColor:'#ccc'//修改邊框的線條顏色，如果borderWidth為0則不起作用
},
三、x軸的樣式控制（y軸同上）
xAxis : [
{
type : 'category',//坐標軸類型，橫軸默認為類目型'category'，縱軸默認為數值型'value'
data: ['A棟', 'B棟', 'C棟', 'D棟', 'E棟', 'F棟'],//x坐標軸上顯示的數據
boundaryGap:true,//控制x軸的數值是否頂頭，默認為true留空，false則頂頭
splitLine: {//控制網格的線條樣式
show:true,
lineStyle:{
color: '#48b',
width: 2,
type: 'solid'
}
},
axisLine:{//x軸的樣式控制
show: true, //顯示與否
lineStyle:{//線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick:{//控制x軸上的間隔突出的小線條樣式
show:'true',//顯示與否
lineStyle:{//線條樣式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisLabel: {//控制x軸上的文字的樣式
show: true,//顯示與否
textStyle: { color: '#fff' },//控制x軸字體樣式
formatter: '{value} °C',//軸上的數據帶單位
}
}
]，
四、鼠標移動到數據上線條的樣式控制
1. 鼠標移動到數據上出現線條的樣式控制
tooltip : {
trigger: 'axis', axisPointer:{ type: 'line', lineStyle: { color: '#929bb6', width: 1, type: 'solid' } } },
2. 鼠標移動到數據上不出現線條出現陰影
tooltip: {
show: true, trigger: 'axis', axisPointer:{ type: 'shadow', shadowStyle: { color: 'rgba(88,101,137,0.3)', width: 'auto', type: 'default' } } },
五、增加兩條y軸，並且指定哪個個數據使用哪個y軸
yAxis : [
{
type : 'value',
splitNumber: 5, // 數值軸用，分割段數，默認為5
boundaryGap:[0,0],
splitLine:{lineStyle:{color:'#505a73'}},
axisLine:{show: false},
axisLabel: { show: true, textStyle: { color: '#fff' },formatter: '{value} ' }
},
{
type : 'value',
splitNumber: 5, // 數值軸用，分割段數，默認為5
boundaryGap:[0,0],
axisLine:{show: false},
splitLine:{lineStyle:{color:'#505a73'}},
axisLabel: { show: true, textStyle: { color: '#fff' },formatter: '{value} '},
show:'true',
position: 'right',//控制新y軸的位置
}
],
series : [
{
"name":"移動到達數",
"type":"bar",
"yAxisIndex":'1',//使用第二條y軸
"data":[5, 20, 40, 10, 10, 20,5, 20, 40, 10, 10, 20]
},
{
"name":"移動收入（萬元）",
"type":"bar",
"yAxisIndex":'0',//指定第一條y軸，默認都為使用第一條
"data":[1.55, 2.90, 1.70, 9.10, 8.10, 1.90,5, 2.50, 4.30, 1.40, 1.10, 2.60]
}
]
六、折線圖上顯示最大值最小值
series: [
{
name: '', // 系列名稱
type: 'line', // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
data: [18.618, 18.386, 18.961, 18.825, 18.643, 19.04], symbolSize:6,//控制折線圖上表示數值的圖標的大小 symbol:'emptyCircle',//控制折線圖上表示數值的樣式 itemStyle: { normal: { lineStyle: { color: '#8a92ad', } } }, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ]
七、圖例的樣式控制
legend: {
data:['寬帶凈增','滲透率'], x:'right',//控制圖例的位置 y:20,//控制圖例的位置 textStyle: {// 圖例文字樣式 color: '#fff', // 圖例文字顏色 fontSize:14 } },
八、軸上的數據太長，換行顯示
xAxis: [ // 直角坐標系中橫軸數組
{
// boundaryGap : false,
type: 'category', // 坐標軸類型，橫軸默認為類目軸，數值軸則參考yAxis說明
data: ['福田區', '南山區', '羅湖區', '寶安區', '龍崗區', '坪大區', '龍華區', '光明區', '鹽田區','蛇口通訊'],//軸上數據
axisLine:{show: false},//x軸
splitLine:{lineStyle:{color:'#505a73'}},//網格顏色
axisLabel: { show: true, textStyle: { color: '#BEC5D6' }, interval : 0, formatter : function(params){//控制軸上數據換行顯示 var newParamsName = ""; var paramsNameNumber = params.length; var provideNumber = 2; var rowNumber = Math.ceil(paramsNameNumber / provideNumber); if (paramsNameNumber > provideNumber) { for (var p = 0; p < rowNumber; p++) { var tempStr = ""; var start = p * provideNumber; var end = start + provideNumber; if (p == rowNumber - 1) { tempStr = params.substring(start, paramsNameNumber); } else { tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; } } else { newParamsName = params; } return newParamsName } }, //軸上字體顏色 axisTick:{show:false}, } ]
九、easyui里面的tab使用統計圖，統計圖寬度無法自適應
//解決tab里面統計圖不按照div的百分百的寬度顯示，overDetailFlowPack無法自適應的div的id
$("#overDetailFlowPack").css( 'width', $("#overDetailFlowPack").width() );
十、echart中統計圖表被壓縮不能正常地自適應
（1）x軸數據為數組['array1'],如果賦值為字符串'array1',就會出現統計圖不能正常展開的情況。
（2）使用jqueryEasyUi，tab切換顯示不同的統計圖，也會出現統計圖被擠壓變形的情況，解決方法是用js獲取容器的寬度賦值給容器。
（3）在需要顯示隱藏的模塊中，一開始隱藏，點擊顯示的時候會看到統計圖被擠壓變形，此時，需要在點擊顯示模塊的時候重新加載一次統計圖便可以正常顯示。
十一、統計圖上每個點都顯示對應的數據
series : [
{
name:'視頻用戶（萬）', type:'bar', itemStyle : { normal: {label : {show: true}}},//控制統計圖上顯示數據 data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,162.2, 32.6, 20.0, 6.4, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] }, { name:'視頻用戶滲透率', type:'line', yAxisIndex: 1, itemStyle : { normal: {label : {show: true,formatter:function(p){return p.value > 0 ? (p.value +'%'):'';}}}},//控制顯示的數據為百分比數值 markLine : { data : [ {type : 'average', name: '平均值'}//顯示平均值水平線 ] }, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4,23.0, 16.5, 12.0, 6.2, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5,12.0, 6.2] } ]