Share the style modifications of six echarts statistical charts

The creation of echarts graphics is relatively simple, just quote Javascript directly. There are three main reasons for using this library. One is because this library is a Baidu project and has been updated. The second is that the project documentation of this library is relatively detailed, each point is explained clearly, and it is in Chinese, making it easier to understand. The third point is that this library supports a wide range of graphics, and graphics can be switched directly, making it very convenient to use.

1: Color modification of the line chart bar

series : [ {
name : ‘SBP(收缩压)’,
type : ‘line’,
itemStyle : {
normal : {
lineStyle:{
color:’#f73d31’
}
}
},
data : y_data
},

2: Modification of the title color attribute

To change the main title color of the icon to red, you only need to add textStyle in title: : {color: 'red' }
picture.png

title: {
text: ‘平均耗时（分钟）’,
textStyle: {
color: ‘red’
},
},

3: Background color setting

var option={
backgroundColor:‘rgba(128, 128, 128, 0.1)’ //rgba设置透明度0.1
}

4: Page display blank modification

When All data is normal and the console does not report an error, but the data is not displayed on the page. At this time, a fixed width can be added.

5: Mobile terminal adaptation problem, adapting to different mobile phone screens

When there are multiple charts, just add a piece of code like this after var option = {}, the icon Will change as the display screen size changes.

window.onresize = function () {
myChart1.resize();
       myChart2.resize();      
        myChart3.resize();        
        }

6: Modification of the xy-axis coordinate axis color

x-axis coordinate:

xAxis: {
type: ‘value’,
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

y-axis coordinate:

yAxis: {
type: ‘category’,
data: [‘SA服务’, ‘洗车’, ‘总检’, ‘喷漆’, ‘钣金’, ‘机修’, ‘等号’],
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [’#e33b38’]
}
},
nameTextStyle: {
color: [’#e33b38’]
},
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

The above are the attribute values ​​of the chart Modification, welcome to read and learn from it!

The above is the detailed content of Share the style modifications of six echarts statistical charts. For more information, please follow other related articles on the PHP Chinese website!