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) {
});
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现