ECharts常用配置整理
API地址
ISQQW.COM x ECharts 文档（国内同步镜像） - 教程
echarts导入
- 初始化charts
import * as echarts from 'echarts' export default { data() { return { charts: echarts, myCharts: null } }, }
配置主题
- 新建主题文件theme.js
- 导入主题文件
import { theme } from './theme' - 注册主题
this.charts.registerTheme('diy-theme', theme) - 使用主题
this.myCharts = this.charts.init(this.$refs['charts'], 'diy-theme')
配置图表随窗口改变而自适应
- 监听窗口resize事件
window.addEventListener('resize', () => { this.myCharts && this.myCharts.resize() })
配置加载圈
- 使用默认加载圈圈
this.myCharts.showLoading() - 加载圈配置项
let options = { text: '加载圈旁边的文案'， color: '', // 加载圈的颜色 textColor: '', // 文案的字体颜色 maskColor: '', // 背景色 fontSize: 12, // 字体大小 showSpinner: true, // 是否显示旋转动画（spinner） spinnerRadius: 10, // 旋转动画（spinner）的半径 lineWidth: 5, // 旋转动画（spinner）的线宽 fontWeight: 'normal', // 字体粗细 fontStyle: 'normal', // 字体风格 fontFamily: 'sans-serif' // 字体系列 } this.myCharts.showLoading(options) - 关闭加载圈
this.myCharts.hideLoading()
配置图例
-
基础图例
- 图例可选用类型为scroll即可滚动翻页，当小于1页时不会出现分页
let option = { legend: { width: '50%', align: 'right', right: '130px', show: true, type: 'scroll' }, }- 效果图
2.自定义图例
pie: {
tooltip: {
trigger: 'item'
},
legend: (() => {
return {
type: 'scroll',
orient: 'vertical',// 这里可以通过判断有多少项控制水平展示图例还是垂直方向展示
height: '80%',
right: '27px',
top: 'center',
itemWidth: 15,
itemHeight: 15,
itemGap: 11,
formatter: name => {
let total = 0
this.source.map(element => {
total += element[1]
})
for (var i = 0; i < this.source.length; i++) {
if (name == this.source[i][0]) {
let persent = 0
if (total != 0) {
persent = ((this.source[i][1] / total) * 100).toFixed(2)
}
return `${name}：${this.dimensions[1]}为${this.source[i][1]}, 占比为${persent}%`
}
}
}
}
})(),
series: (() => {
return [
{
type: 'pie',
radius: (() => {
// 是否为环形
if (this.isAnnular) {
return ['25%', '45%']
} else {
return '50%'
}
})(),
center: ['30%', '50%'],
label: {
fontSize: 12
}
}
]
})()
}
- 效果图
横坐标配置 categoryAxis
categoryAxis的配置和标题同级别
categoryAxis: {
axisLine: {
show: false,
lineStyle: {
// 控制鼠标一到图标上x轴坐标显示的字体颜色
color: '#cccccc'
}
},
axisTick: {
show: true,
lineStyle: {
// 横坐标轴刻度的颜色
color: '#eeeeee'
}
},
axisLabel: {
show: true,
// 横坐标字体默认的颜色
color: '#999999'
},
splitLine: {
// 坐标系中的竖线样式控制
show: false,
lineStyle: {
color: [
'#eeeeee'
]
}
},
splitArea: {
// 坐标系被竖线分割为几份后，每份区间的背景色等控制
show: false,
areaStyle: {
color: [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
纵坐标配置valueAxis
valueAxis: {
axisLine: {
// y轴样式控制
show: true,
lineStyle: {
color: '#eeeeee'
}
},
axisTick: {
// y轴刻度线样式控制
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
// y轴字体样式控制
show: true,
color: '#999999'
},
splitLine: {
// 坐标系中的横线样式控制
show: true,
lineStyle: {
color: [
'#eeeeee'
]
}
},
splitArea: {
show: false,
areaStyle: {
color: [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
提示框配置
很多情况下会遇到提示框内容过多超出图表展示区域，此时可以自定义使其横向布局，解决溢出问题。下面的配置均限制在数据是通过dataset集合的形式
效果图
实现方式
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
order: 'valueDesc',
axisPointer: {
// isStack 是否为堆叠图
type: this.isStack ? 'shadow' : 'cross',
crossStyle: {
color: '#666',
type: 'dashed'
}
},
formatter: datas => {
let outHtml = `<div style="
display: flex;
flex-wrap: wrap;
max-width:${datas.length > 20 ? ' 900px' : '150px'};
max-height: 400px;
overflow: hidden;
"><div style="width:100%;">${datas[0].name || ''}</div>`
datas.map((element, index) => {
let dataItem = [...element.value]
dataItem.shift()
// console.log('dataItem--------', dataItem)
let divStr = `<div class="formatter" style="display:inline-block;margin-right:10px;">
<div>
${element.marker} <span class="label">${element.seriesName}:</span>
<span class="cont">${dataItem[index]}</span>
</div>
</div>`
outHtml += divStr
})
outHtml += '</div>'
return outHtml
}
}
