Vue使用Echarts實(shí)現(xiàn)立體柱狀圖

更新時(shí)間：2022年04月02日 13:41:56 作者：仲夏今天也在寫前端

這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue使用Echarts實(shí)現(xiàn)立體柱狀圖的具體代碼，供大家參考，具體內(nèi)容如下

預(yù)覽：

代碼：

頁面部分:

<template>
  <div class="roadnum-all" ref="roadnumall">
    <div id="roadnum" ref="dom"></div>
  </div>
</template>

CSS部分:

.roadnum-all {
  width: 100%;
  height: 100%;      /*填滿父級(jí)容器*/
}

JS部分:

import echarts from 'echarts'   // 引入Echarts

export default {
  name: "ltzzt",
  data() {
    return {
      data: [],
      dom: null
    }
  },
  mounted() {
    this.$nextTick(() => {      // 給圖標(biāo)寬高 使圖標(biāo)填滿容器
      document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
      document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
      this.draw();
    })
  },
  methods: {
    // 畫圖
    draw() {
      // 網(wǎng)絡(luò)請(qǐng)求 假裝從后端拿回來的數(shù)據(jù)
      this.data = [
        { name: '京哈高速', value: 10 },
        { name: '京哈高速1', value: 20 },
        { name: '京哈高速2', value: 30 },
        { name: '京哈高速3', value: 40 },
        { name: '京哈高速4', value: 50 },
        { name: '京哈高速5', value: 60 },
        { name: '京哈高速6', value: 70 },
        { name: '京哈高速7', value: 80 },
        { name: '京哈高速8', value: 90 },
        { name: '京哈高速9', value: 100 },
        { name: '京哈高速10', value: 110 },
        { name: '京哈高速11', value: 120 }
      ];
      // 拼軸顯示和數(shù)據(jù)的數(shù)組
      let xAxisText = [];
      let dataList = [];
      this.data.forEach(item => {
        xAxisText.push(item.name);
        dataList.push(item.value)
      })
      // 從這里開始 創(chuàng)建自定義圖形 —— 長(zhǎng)方體的正面
      var MyCubeRect = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 180,      // 長(zhǎng)方體寬度
          zWidth: 8,      // 陰影折角寬
          zHeight: 4      // 陰影折角高
        },
        buildPath: function (ctx, shape) {
          console.log(ctx, shape);
          const api = shape.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p0 = [shape.x, shape.y];
          const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
          const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
          const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];
          const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];

          ctx.moveTo(p0[0], p0[1]); //0
          ctx.lineTo(p1[0], p1[1]); //1
          ctx.lineTo(p2[0], p2[1]); //2
          ctx.lineTo(p3[0], p3[1]); //3
          ctx.lineTo(p4[0], p4[1]); //4
          ctx.lineTo(p0[0], p0[1]); //0
          ctx.closePath();
        }
      })

      // 創(chuàng)建第二個(gè)自定義圖形 —— 長(zhǎng)方體的上面和側(cè)面
      var MyCubeShadow = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
          width: 180,
          zWidth: 8,
          zHeight: 4
        },
        buildPath: function (ctx, shape) {
          const api = shape.api;
          const xAxisPoint = api.coord([shape.xValue, 0]);
          const p0 = [shape.x, shape.y];
          const p1 = [shape.x - shape.width / xAxisText.length, shape.y];
          const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
          const p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
          const p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
          const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
          const p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];

          ctx.moveTo(p4[0], p4[1]); //4
          ctx.lineTo(p3[0], p3[1]); //3
          ctx.lineTo(p5[0], p5[1]); //5
          ctx.lineTo(p6[0], p6[1]); //6
          ctx.lineTo(p4[0], p4[1]); //4

          ctx.moveTo(p4[0], p4[1]); //4
          ctx.lineTo(p6[0], p6[1]); //6
          ctx.lineTo(p7[0], p7[1]); //7
          ctx.lineTo(p1[0], p1[1]); //1
          ctx.lineTo(p4[0], p4[1]); //4
          ctx.closePath();
        }
      });
      echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
      echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
      const option = {
        color: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],
        title: {
          text: '驗(yàn)算路線排行榜',
          left: 20,
          top: 20
        },
        legend: {
          show: true,
          top: 25
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '15%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisText,
          boundaryGap: true,
          interval: 0,
          axisLabel: {
            color: '#333',
            //  讓x軸文字方向?yàn)樨Q向
            interval: 0,
            formatter: function (value) {
              return value.split('').join('\n')
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        series: [{
          name: '次數(shù)',
          type: 'custom',
          renderItem: (params, api) => {
            let location = api.coord([api.value(0), api.value(1)]);
            return {
              type: 'group',
              children: [{
                type: 'MyCubeRect',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1]
                },
                style: api.style(),      // api.style()——繼承原本的樣式
              }, {
                type: 'MyCubeShadow',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1]
                },
                style: {
                  fill: api.style(),
                  text: ''            // 繼承原本樣式的基礎(chǔ)上將label清空 如果不清空生成的圖上會(huì)顯示兩個(gè)重疊的label
                }
              }]
            }
          },
          stack: '總量',
          label: {
            show: true,
            position: 'top',
            color: '#333',
            formatter: `{c}次`,
            fontSize: 16,
            distance: 15
          },
          itemStyle: {
            normal: {
              color: (params) => {
                // 使每根柱子顏色都不一樣 
                let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'];
                if (params.dataIndex + 1 <= colorList.length) {
                  return colorList[params.dataIndex]
                } else {
                  // 如果柱子的數(shù)量超過顏色數(shù)組 就從頭再來一遍
                  return colorList[params.dataIndex - colorList.length]
                }
              }
            }
          },
          data: dataList
        }]
      };
      this.dom = echarts.init(this.$refs.dom);
      this.dom.setOption(option, true)
      window.addEventListener("resize", () => {
        if (document.getElementById('roadnum') && this.$refs.roadnumall) {
          document.getElementById('roadnum').removeAttribute('_echarts_instance_');
          document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
          document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
          this.dom.resize();
        }
      });
    }
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: