如何使用 Echarts 绘制每日垂直条形图，并使用颜色区分数值范围？-js教程-PHP中文网

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

花韻仙語

发布： 2024-11-15 16:29:12

原创

942人浏览过

如何使用 echarts 绘制每日垂直条形图，并使用颜色区分数值范围？

如何绘制每日垂直条形图

问题：

需要绘制一个图表，竖轴代表 0-30 号，横轴代表 1 月 1 日至 12 月 31 日。每个点表示每天的值。该图表使用 html、javascript 和 css 技术栈。

答案：

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

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

使用 echarts 绘制日历坐标系：

引入 echarts：<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
创建一个图表容器：<div id="mychart"></div>
初始化 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);

登录后复制

结果：

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

以上就是如何使用 Echarts 绘制每日垂直条形图，并使用颜色区分数值范围？的详细内容，更多请关注php中文网其它相关文章！