1、饼图、折线图、柱状图中option的字段及说明
//图标名称,在饼图中不起作用
title: {
text: '图名称'
},
//聚焦点时,显示相关x\y轴信息
tooltip: {
trigger: 'axis'
},
//图标说明:表示的属性
legend: {
data: ['雨量', '风级', '雾霾程度', '可见度']
},
//进行处理图表的显示大小,整个图标距离前后左右的距离
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
//折线图或柱状图对应的x轴的设置
xAxis: {
type: 'category',//显示方式,根据所给数据显示
data: ['1月', '2月', '3月', '4月','5月'],//x轴对应的显示表示
//对于x轴显示表示的设置
axisLabel: {
textStyle: {},//对于x轴显示表示的样式设置
formatter: function(value) {
}//可以设置下标字数太长或过大显示不全问题,可参考 https://blog.csdn.net/superlover_/article/details/79714823
},//对于x轴,显示表示的设置
axisLine: {},//对于x轴线的设置
axisTick: {},//x轴标线分段设置
splitLine: {},//x轴分割线的设置},
//折线图或者柱状图对应的y轴的设置
yAxis: {
type: 'value',
lineStyle: {
color: 'red'
}
},
//饼图属性对应的值或折线图、柱状图属性对应值
series: [
{
name: '一级',
type: 'line',
color: '#18CA7D',
symbol: 'circle',
data: [9, 13, 15, 20, 17, 39, 40]
},
{
name: '二级',
type: 'line',
color: '#FFCD42',
symbol: 'circle',
data: [8, 12, 16, 19, 16, 40, 51]
},
{
name: '三级',
type: 'line',
color: '#FF6165',
symbol: 'circle',
data: [7, 15, 20, 14, 17, 38, 50]
},
{
name: '四级',
type: 'line',
color: '#FF22E8',
symbol: 'circle',
data: [6, 12, 17, 37, 26, 20, 40]
}
]
}
2、双Y轴使用方式,进行处理yAxis,处理如下:
yAxis: [ { type: 'value', name: 'name1', axisLine: { lineStyle: { color: '#FFFFFF', width: 0.5 } }, splitLine: { // 设置网格 show: true, lineStyle: { type: 'solid', width: 0 } } }, { type: 'value', name: 'name2', axisLine: { lineStyle: { color: '#FFFFFF', width: 0.5 } }, splitLine: { // 设置网格 show: true, lineStyle: { type: 'solid', width: 0 } } } ],
3、 x轴和y轴数据可同时由后台获取进行展示
drawChart() { let myChart = this.$echarts.init(document.getElementById('chartShow')) myChart.setOption({}, true) //重新渲染图标需要将先前生成的图表消除 let unitTypes = ['unit1','unit2']//单位类型 let series = [] for (let item of this.leftSelected) { let o = {} o = { type: 'line', name: unitTypes[0], data: item.objectList, symbol: 'circle', symbolSize: 8, itemStyle: { normal: { color: 'red', borderColor: 'red' //拐点边框颜色 } } } if (o) { series.push(o) } } myChart.setOption({ tooltip: { trigger: 'axis' }, legend: { data: unitTypes, textStyle: { color: '#fff' } }, xAxis: { type: 'category', axisLabel: { interval: 0, rotate: 40, textStyle: { fontWeight: '300', fontSize: '8', color: '#FFFFFF' } }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#FFFFFF', width: 0.5 } } }, yAxis: [ { type: 'value', name: unitTypes[0], axisLine: { lineStyle: { color: '#FFFFFF', width: 0.5 } }, splitLine: { // 设置网格 show: true, lineStyle: { type: 'solid', width: 0 } } }, { type: 'value', name: unitTypes[1], axisLine: { lineStyle: { color: '#FFFFFF', width: 0.5 } }, splitLine: { // 设置网格 show: true, lineStyle: { type: 'solid', width: 0 } } } ], series: series }) }
4、myChart.setOption({}, true) //消除图表