自定义Echarts柱状图, 一图显示多组数据

 //先定义图表容器, 至于图表所需要的js啥的, 请自行搜索教程, 不多赘述

<div id="timeCostDiv" style="height:300px; width:90%; margin-left:5%;" />
created() {
    this.loadTimeCost()
},
loadTimeCost() {
      const that = this
      const param = { dateBegin: that.dateBegin, dateEnd: that.dateEnd, limit: 5, type: that.dateType }
      timeCostStatistics(param).then(data => {
        if (data) {
          var dataList = []
          // color: ['#fec12b', '#f3535f', '#2163db', '#a43971', '#00d0b0'],
          // 第一个数值, 代表维度列数, 第二个数值是数据范围start, 第三个数值是数据范围end, 第四个数值是第几根柱子, 第五个数值代表当前维度列有几个柱子
          // data.push({ name: '1', value: [0, 0, 120, 1, 4] })
          dataList.push({ itemStyle: { normal: { color: '#fec12b' }}, name: '进场时间', value: [0, 0, data.timeCostStatistics[0].carApproachTimeCost, 1, 3] })
          dataList.push({ itemStyle: { normal: { color: '#f3535f' }}, name: '检测时间', value: [0, 0, data.timeCostStatistics[0].carTimeCost, 2, 3] })
          dataList.push({ itemStyle: { normal: { color: '#2163db' }}, name: '等候时间', value: [0, 0, data.timeCostStatistics[0].carWaitTimeCost, 3, 3] })

          dataList.push({ itemStyle: { normal: { color: '
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用\[1\]和引用\[2\]的内容,你可以通过设置`series`中的`name`属性来显示图例。在你的代码中,每个柱状图都有一个`name`属性,分别是"峰"、"平"和"谷"。这些名称将被用作图例的标签。确保在Echarts的配置中设置`legend`属性为`show: true`,以确保图例显示出来。 以下是一个示例代码片段,展示了如何设置图例: ```javascript option = { legend: { show: true }, series: \[ { name: "峰", type: "bar", stack: "值", data: fengList, itemStyle: { color: state.getThemeConfig.curveConfig\[0\], }, }, { name: "平", type: "bar", stack: "值", data: pingList, itemStyle: { color: state.getThemeConfig.curveConfig\[1\], }, }, { name: "谷", type: "bar", stack: "值", data: guList, itemStyle: { color: state.getThemeConfig.curveConfig\[2\], }, }, \], }; ``` 通过以上配置,你的柱状图将会显示具有相应名称的图例。 #### 引用[.reference_title] - *1* [ECharts柱状图图形标签间隔显示](https://blog.csdn.net/jixuziyuan/article/details/127617220)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts 自定义柱状图颜色,并展示图例。](https://blog.csdn.net/qq_44830966/article/details/123991912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [自定义Echarts柱状图一图显示多组数据](https://blog.csdn.net/weixin_40463857/article/details/126158538)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值