Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置

 1     // 人均效能
 2     var initRjxnChart = function () {
 3         var rjxnChart = echarts.init(document.getElementById("rjxn_echart"));
 4         var rjxnoption = {
 5             tooltip: {
 6                 trigger: 'axis',
 7             },
 8             grid: {
 9                 left: '8%',
10                 bottom: '20%',
11                 top: '10%',
12                 right: '8%',
13             },
14             legend: {
15                 show: true,
16                 orient: 'horizontal',
17                 data: ['人均每小时操作量'],
18                 x: '8%',
19                 y: '0%',
20                 textStyle: {
21                     color: '#8c8c92'
22                 }
23             },
24             color: ["#cd9136"],
25             xAxis: [{
26                 type: 'category',
27                 data: ['上海', '北京', '江苏', '山东', '湖北', '武汉', '广州'],
28                 boundaryGap: true,
29                 axisTick: { // X轴线 刻度线 
30                     show: false,
31                     length: 10,
32                     lineStyle: {
33                         color: 'red',
34                         type: 'solid',
35                         width: 2
36                     }
37                 },
38                 axisLabel: {   // X轴线 标签修改 
39                     textStyle: {
40                         color: '#8c8c92', //坐标值得具体的颜色
41                     }
42                 },
43                 splitLine:{  
44                     show: true, // X轴线 颜色类型的修改
45                     lineStyle: {
46                         type: 'dashed',
47                         color: '#292c38'
48                     }  
49                 },
50                 axisLine: { 
51                     show: true, // X轴 网格线 颜色类型的修改
52                     lineStyle: {
53                         type: 'dashed',
54                         color: '#292c38'
55                     }  
56                 },  
57             }],
58             yAxis: [{
59                 type: 'value',
60                 name: '',
61                 min: 0,
62                 max: 3000,
63                 interval: 500,
64                 axisLabel: {
65                     formatter: '{value}',
66                     textStyle: {
67                         color: '#8c8c92', //坐标值得具体的颜色
68                     }
69                 },
70                 axisLine: { 
71                     show: true, // Y轴线
72                     lineStyle: {
73                         type: 'dashed',
74                         color: '#292c38'
75                     }  
76                 },
77                 splitLine:{  
78                     show: true,
79                     lineStyle: {
80                         type: 'dashed',
81                         color: '#292c38'
82                     }  
83                 }  
84             }],
85             series: [{
86                     name: '人均每小时操作量',
87                     type: 'line',
88                     data: [100, 200, 100, 500, 100, 100, 1000]
89                 }
90             ]
91         };
92         if (rjxnoption && typeof rjxnoption === "object") {
93             rjxnChart.setOption(rjxnoption, true);
94         }
95     };

 

转载于:https://www.cnblogs.com/zsongs/p/7340518.html

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值