7},8grid: {9left: '8%',10bottom: '20%',11top: '10%',12right: '8%',13},14legend: {15show:true,16orient: 'horizontal',17data: ['人均每小时操作量'],18x: '8%',19y: '0%',20textStyle: {21color
7},8grid: {9left: '8%',10bottom: '20%',11top: '10%',12right: '8%',13},14legend: {15show:true,16orient: 'horizontal',17data: ['人均每小时操作量'],18x: '8%',19y: '0%',20textStyle: {21color
color: '#fff', //X轴线的颜色 width: '2' //坐标线的宽度 } }, axisLabel: { show: true, textStyle: { color: '#57C0A1' } } //X轴标签颜色 } ] 如图: 反过来一样Y轴是一样的;
15slML 2020 Windows10 WebStorm2020 方法/步骤 1 打开一个html文件，里面已经写好了一个折线图。2 运行网页，可以看到折线图x轴的颜色为灰色。3 使用axisLine和axisLabel属性修改折线图x轴的颜色，其中axisLine为x轴的线，axisLabel为x轴的标题。4 再次运行网页，可以看到x轴的线为红色，标题为蓝色。
/*改变x轴颜色*/ axisLine: { lineStyle: { color: '#e33b38', width: 1, //这里是为了突出显示加上的 } }, data: ["1", "2", "3", "4", "5"] }, yAxis: { splitLine: { show: false }, /*改变y轴颜色*/ axisLine: { ...
// width:1, //x轴线的宽度 // } // } // 将y轴的线去除掉 // axisLine:{ // show:false // }, }, series: [{ name: '销量', type: 'bar', itemStyle: { normal: { // 这里就可以实现,配置柱状图的颜色 color: function (params) { ...
2.如果只想设置图表X轴和Y轴区域的背景颜色,就是一下这个区域 图片.png 此时需要在option中设置grid配置项 option={...grid:{show:true,borderColor:"transparent",backgroundColor:'rgba(63,28,85,0.2)',},...} 此时的效果如下 图片.png
axisLine: {/x轴线的颜色以及宽度 show: true, lineStyle: { color: "rgba(219,225,255,1)", width: 0, type: "solid" } }, axisTick: { show: false, }, axisLabel: {//x轴文字的配置 show: true, textStyle: { color: "rgba(219,225,255,1)", ...
xAxis:[{type:'category',data:['1号','18号','22号','29号'],axisLine:{/x轴线的颜色以及宽度show:true,lineStyle:{color:"#fff",width:0,type:"solid"}},axisTick:{show:false,},axisLabel:{//x轴文字的配置show:true,textStyle:{color:"#fff",}},splitLine:{//分割线配置show:false,...