foreword
Some configurations during the use of echarts are recorded here.
start
1. Overall use
Take a donut chart as an example:
html
<div id="myChart" :style="{width: '100%', height: '180px'}"></div>
js part
drawChart(list) {
let myChart= this.echarts.init(document.getElementById("myChart"));
myChart.setOption({
tooltip: {
trigger: 'item'
},
legend: {
data:['轻微','严重','一般','不可用'],
orient: 'vertical', //垂直显示
y: 'center', //延Y轴居中
x: '55%',
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 20,
},
color:['#302E77','#FFAB00','#9095FD','#FB6D40'],
series: [
{
name: '告警信息',
type: 'pie',
center:['25%','50%'],
radius: ['65%', '85%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data:list
}
]
})
},
Two, detailed usage
1. Legend display
1> The legend displays multiple pieces of data information, including values and percentages, and sets some styles, text size, left and right alignment, etc.
example:
myChart.setOption({
legend: {
data:['云主机','云数据库','其它'],
orient: 'vertical', //垂直显示
y: 'center', //延Y轴居中
x: '45%',
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 20,
formatter:function(name){
//该函数用于设置图例显示后的百分比
let value;
let total=0;
list.forEach((item)=>{
total += item.value;
if (item.name == name) {
value = item.value;
}
})
let arr=[];
if(total){
arr = [
'{a|' + name + '}',
'{c|' + value + '元}',
'{b|' + (((value / total) * 100).toFixed(2)) + '%}'
];
}else{
arr = [
'{a|' + name + '}',
'{c|' + value + '元}',
'{b|' + '0%}'
];
}
return arr.join('');
},
textStyle: {
rich: {
a: {
fontSize: 12,
verticalAlign: 'center',
width:50,
align: 'left',
padding: [0, 0, 0, 0],
color: '#9d9d9d'
},
b: {
fontSize: 12,
width:80,
align: 'right',
padding: [0, 0, 0, 10],
color: '#000'
},
c: {
fontSize: 12,
width:80,
align: 'right',
padding: [0, 0, 0, 0],
color: '#302E77'
}
}
}
},
})
2> Legend display part, custom hide a legend
If the data format is like this list: [{name:'yearly subscription',value:50},{name:'on-demand payment',value:50}], the legend wants to hide the pay-as-you-go payment and only display the annual
subscription , it can be set as follows.
legend: {
orient: 'vertical',
icon: 'circle',
data:['包年包月'],
selected:{
'按需付费':true
}
},
3>Remove (pie chart) highlight
*******鼠标移入图上 禁止高亮：
series:{
silent:true
}
*******鼠标移入图注 禁止高亮：
legend：{
selectedMode:false
}
2. Legend
Move the mouse into an icon item, and the legend will display the percentage or other information.
For the formatter function in the tooltip, I printed its parameter param, which is like this.
There are various required parameters in it, and the return in the formatter function can write tags, and you can splice whatever you want.
like:
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: function(params){
console.log(params)
return `<div>${
params.seriesName}<br/>${
params.marker}${
params.name}：${
params.value}元（${
params.percent}%）</div>`
}
},
})
3. Graphics
As shown in the figure, move into an item in the circular graph, and the circular graph will disappear. This is caused by the color setting being too light.
Solution:
//去掉圆环默认hover时高亮效果
myChart.on('mouseover', e => {
let op = myChart4.getOption()
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: e.dataIndex,
color: e.color
})
myChart.setOption(op, true)
})
Excerpt from: https://www.cnblogs.com/x-llin/p/13825194.html
line chart
1. The graphics cover the entire area
grid:{
top:"50px",
left:"5px",
right:"5px",
bottom:"50px",
backgroundColor: '#fff',
width:"auto", //图例宽度
height:"100%", //图例高度
},
2. Line chart from scratch
xAxis:{
boundaryGap:false
}
3. Add grid lines
xAxis:{
splitLine:{
show:true
},
},
yAxis:{
splitLine:{
show:true
},
}
4. Change the color of the horizontal and vertical axes
xAxis:{
axisLine:{
show:true,
lineStyle:{
color:'#c1c1c1'
}
},
},
yAxis:{
axisLine:{
show:true,
lineStyle:{
color:'#c1c1c1'
}
},
}
5. Move into the display with markings
tooltip:{
trigger:'axis',
axisPointer:{
type:'cross'
}
},
6. Remove the small dots on the line chart
series:[
{
symbol:false
}
]
7. There is too much data in the line chart, and the abscissa axis only displays part
(for example: only multiples of 8 are displayed)
xAxis：{
axisLabel:{
interval:(index,value)=>{
if((index+1)%8 == 0){
return true;
}else{
return false;
}
}
},
}
8. Change discount color
series:[
{
itemStyle:{
normal:{
lineStyle:{
color:'#529dff'
}
}
}
}
]
postscript
Above, some commonly used configurations of echarts will be recorded one after another, so that you and your friends can check them.