文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue实现横向斜切柱状图

2024-04-02 19:55

关注

本文实例为大家分享了vue实现横向斜切柱状图的具体代码,供大家参考,具体内容如下

实现效果:

实现代码:


<template>
  <div class="Consumption">
    <div style="width: 350px; height: 180px" ref="ConsumptionChart" />
  </div>
</template>
<script>
import echarts from 'echarts'
const myShape = {
  x: 0,
  y: 0,
  width: 10 //间距
}
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
  shape: myShape,
  buildPath: function(ctx, shape) {
    // 会canvas的应该都能看得懂,shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x + 14, shape.y - 10]
    const c2 = [xAxisPoint[0], xAxisPoint[1] - 10]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath()
  }
})
const colors = ['rgba(50, 197, 255, 0.8)', 'rgba(0, 253, 255, 0.8)', 'rgba(255, 235, 0, 0.8)']
const colorss = ['rgba(0, 145, 255, 1)', 'rgba(68, 215, 182, 1)', 'rgba(215, 170, 68, 1)']
// 注册三个面图形
echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar)
const defaultOption = {
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 10,
    bottom: 30,
    left: 10,
    right: 10,
    containLabel: true
  },
  yAxis: {
    type: 'category',
    data: [],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color(value, index) {
        return colorss[index]
      },
      fontSize: 14
    }
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    min: 0,
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    boundaryGap: ['20%', '20%']
  },
  series: [
    {
      type: 'custom',
      name: '',
      itemStyle: {
        color: 'rgba(44, 197, 253, 1)'
      },
      renderItem: (params, api) => {
       const location = api.coord([api.value(0), api.value(1)])
        const xlocation = api.coord([0, api.value(1)])
        return {
          type: 'InclinedRoofBar',
          shape: {
            api,
            xValue: api.value(0),
            yValue: api.value(1),
            x: location[0],
            y: location[1] + myShape.width,
            xAxisPoint: [xlocation[0], xlocation[1] + myShape.width]
          },
          style: {
            fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colors[params.dataIndex]
              },
              {
                offset: 1,
                color: colorss[params.dataIndex]
              }
            ])
          }
        }
      },
      data: []
    },
    {
      type: 'bar',
      label: {
        normal: {
          show: true,
          position: 'right',
          fontSize: 14,
          offset: [15, 0]
        }
      },
      showBackground: false,
      barWidth: 14,
      backgroundStyle: {
        color: 'rgba(50, 197, 255, 0.1)'
      },
      itemStyle: {
        color: 'transparent'
      },
      tooltip: {
        show: false
      },
      data: []
    }
  ]
}
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.ConsumptionChart)
  },
  methods: {
    getOption(seriesData) {
      const option = defaultOption
      const { yAxis, series } = option
      // 处理数据
      yAxis.data = ['低', '中', '高']
      series[0].data = seriesData
      series[1].data = seriesData.map((item, index) => Object.assign(item, { label: { color: colorss[index] } }))
      this.myChart.setOption(option)
    }
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯