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: {
'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，可用百分比
'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',
2,
type: 'solid'
}
},
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#48b',
2,
type: 'solid'
}
},
axisTick:{//控制x轴上的间隔突出的小线条样式
show:'true',//显示与否
lineStyle:{//线条样式
color: '#48b',
2,
type: 'solid'
}
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: { color: '#fff' },//控制x轴字体样式
formatter: '{value} °C',//轴上的数据带单位
}
}
]，
四、鼠标移动到数据上线条的样式控制
1. 鼠标移动到数据上出现线条的样式控制
tooltip : {
trigger: 'axis',
axisPointer:{
type: 'line',
lineStyle: {
color: '#929bb6',
1,
type: 'solid'
}
}
},
2. 鼠标移动到数据上不出现线条出现阴影
tooltip: {
show: true,
trigger: 'axis',
axisPointer:{
type: 'shadow',
shadowStyle: {
color: 'rgba(88,101,137,0.3)',
'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) + "
";
}
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]
}
]