分享六款echarts统计图的样式修改

百变鹏仔 2个月前 (11-27) #echarts

文章标签样式

echarts图形的创建比较简单，直接引用javascript即可。使用这个库的原因主要有三点，一个是因为这个库是百度的项目，而且一直有更新。第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易。第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。

1：折线图条的颜色修改

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

2：标题颜色属性修改

将图标主标题颜色修改成红色，只需要在 title:里面添加 textStyle: {color: ‘red’ }即可
图片.png

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

3：背景颜色的设置

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

4：页面显示空白的修改

当一切数据正常，控制台也没有报错的时候，但数据就是不显示在页面上，这个时候，要加上固定的宽度即可。

5：移动端的适配问题，适配不同的手机屏幕

有多个图表的时候，在var option = {}后面加上这样的一段代码即可，图标会随着显示屏幕尺寸大小改变而改变。

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

6：xy轴坐标轴颜色的修改

x轴坐标：

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

y轴坐标：

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

以上是图表的属性值修改，欢迎阅读借鉴！

文章推荐

分享六款echarts统计图的样式修改

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用