Hello! 欢迎来到小浪资源网!



如何使用 Echarts 绘制每日垂直条形图,并使用颜色区分数值范围?


avatar
1986424546 2024-11-15 30

如何使用 Echarts 绘制每日垂直条形图,并使用颜色区分数值范围?

如何绘制每日垂直条形图

问题:

需要绘制一个图表,竖轴代表 0-30 号,横轴代表 1 月 1 日至 12 月 31 日。每个点表示每天的值。该图表使用 htmlJavaScriptcss 技术

答案:

你可以使用 echarts 库的日历坐标系实现此图表。

使用 echarts 绘制日历坐标系:

  1. 引入 echarts:
  2. 创建一个图表容器:
  3. 初始化 echarts 实例:var mychart = echarts.init(document.getelementbyid(‘mychart’));

示例代码:

var myChart = echarts.init(document.getElementById('myChart'));  var option = {   calendar: {     top: 10,     left: 20,     range: '2023',     splitLine: {       show: true     },     itemStyle: {       borderWidth: 0.5,       borderColor: '#000'     },     cellSize: 15   },   tooltip: {},   visualMap: {     type: 'continuous',     min: 0,     max: 30,     text: ['高', '低'],     realtime: false,     calculable: true,     inRange: {       color: ['#0099FF', '#00FF00', '#FFFF00', '#FF9900', '#FF0000']     }   },   series: [{     type: 'heatmap',     coordinateSystem: 'calendar',     data: [       ['2023-01-01', 10],       ['2023-01-02', 15],       // ...省略更多数据     ]   }] };  myChart.setOption(option);

结果:

生成的图表是一个日历坐标系,其中每个单元格表示一天的值。颜色代码会根据值的范围而变化。

相关阅读