echarts 统计图 怎么修改 默认颜***

_suudjdjd 2023-03-21 21:36

• 

  _Nanjolno_

  2023-03-21 22:08

  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,//这里是为了突出显示加上的}}},

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

  series : [{name:aymc,legendHoverLink : false,type : 'line',itemStyle : {normal : {color:'#f5bf58',label : {show : true,formatter : '{b}：{c}',position : 'top',textStyle : {fontWeight : '700',fontSize : '12',color:'#f5bf58'}}
  0 讨论(0)
  发布评论:

  提交评论

  ---

  •  加载中...