随笔 - 45  文章 - 0  评论 - 11  阅读 - 15万

Echart 改变X轴、Y轴、折线的颜色和数值

在操作E-chart时需要根据需求改变颜色和属性

图1:

复制代码
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
复制代码

 

图2:

解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
option = {
             //标题
           title: {
               text: title,
               //标题样式
               textStyle: {
                   fontWeight: 'normal',
                   color: '#fff',
               },
               //top: 20,
           },
           xAxis: {
               type: 'category',
               //x轴字体颜色
               axisLine: {
                   lineStyle: {
                       color: '#fff'
                   }
               },
               data: ['0822','0823','0824','0826','0827','0828']
           },
           yAxis: {
               type: 'value',
               //y轴颜色
               axisLine: {
                   lineStyle: {
                       color: '#fff'
                   }
               },
               //y轴设置为百分比
               axisLabel: {
                   formatter: '{value}%',
               },
               //坐标轴内线的样式
               splitLine: {
                   lineStyle: {
                       color: '#666',
                       //type:'dashed'虚线
                   }
               }
           },
           series: [{
               //折线上数字
               label: {
                   normal: {
                       show: true,
                       position: 'top',
                       formatter:'{c}%'
                   }
               },
               // 折线颜色
               itemStyle: {
                   normal: {
                       color: '#33CCFF',
                       lineStyle: {
                           color: '#33CCFF'
                       }
                   }
               },
               data:['78.57','50','80','93.33','92.86','100'],
               type: 'line',
               smooth: true
           }]
       };
       ;
       if (option && typeof option === "object") {
           myChart.setOption(option, true);
       }     
   }

E-chart 点击事件

myChart.on('click', function (params) {
});

 

posted on   沫丶灬沫  阅读(15337)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示