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] } ]