vue를 사용하여 세로 막대형 차트를 구현하는 방법

vue를 사용하여 세로 막대형 차트를 구현하는 방법: 1. "

" 속성을 사용하여 div를 만듭니다. Mounted() {this.fetchData()window.addEventListener('resize',()=>{if (this.chart){...}"는 3차원 히스토그램을 구현할 수 있습니다.

The 이 튜토리얼의 운영 환경: Windows 10 시스템, vue3 버전, DELL G3 컴퓨터

vue를 사용하여 세로 막대형 차트를 구현하는 방법

vue는 3차원 세로 막대형 차트를 구현합니다

스타일은 다음과 같습니다. 아래:

3차원 세로 막대형 차트는 yData+bottom+top으로 구성되어 있다고 생각하시면 되며, 해당 코드는 다음과 같습니다.

<template>
  <div></div></template>

<script>import echarts from &#39;echarts&#39;export default {
  data() {
    return {
      chart: null,
      data: [], //数据
      xData: [], //x轴
      yBarData: [], //y轴
      yLable: [],
      colorStops: [],
      chartLegend: [], //图例
      colorOptions: [ //图例以及柱形图颜色选择
        &#39;#5ba2e4&#39;,
        &#39;#f58510&#39;,
        &#39;#afa5a5&#39;,
        &#39;#facb3d&#39;,
        &#39;#0854cf&#39;,
        &#39;#48c611&#39;,
        &#39;#082b63&#39;
      ]
    }
  },
  mounted() {
    this.fetchData()
    //图的大小自适应
    window.addEventListener(&#39;resize&#39;,()=>{
      if (this.chart){
        this.chart.resize()
      }
    })
  },
  beforeDestroy() { //实例销毁之前调用
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    fetchData() {
      this.xData = ["黑龙江",&#39;辽宁&#39;,&#39;贵州&#39;,&#39;福建&#39;,&#39;湖北&#39;,&#39;河南&#39;,&#39;河北&#39;,&#39;山西&#39;,&#39;山东&#39;,&#39;天津&#39;,&#39;吉林&#39;,&#39;北京&#39;,&#39;内蒙古&#39;,&#39;云南&#39;]
      this.yLable = [&#39;10&#39;,&#39;20&#39;,&#39;30&#39;,&#39;40&#39;,&#39;50&#39;,&#39;60&#39;,&#39;70&#39;,&#39;80&#39;,&#39;90&#39;,&#39;100&#39;,&#39;110&#39;,&#39;120&#39;,&#39;130&#39;,&#39;140&#39;]
      this.chartLegend = []
      const dateArr = []
      this.yLable.forEach((item, index) => {
        if (item !== null && item !== undefined) {
          dateArr.push(this.yLable[index])
        }
      })
      this.chartLegend = dateArr      this.initData()
      this.initChart()
    },
    initData() {
      this.yBarData = this.yLable    },
    initChart() {
      this.chart = echarts.init(this.$refs.BarChart)
      this.chart.clear() // 清空当前实例
      let colors = []
      const dom = 800
      const barWidth = dom / 20
      for (let i = 0; i < 4; i++) {
        colors.push({
          colorStops: [
            {
              offset: 0,
              color: &#39;#73fcff&#39; // 最左边
            }, {
              offset: 0.5,
              color: &#39;#86eef1&#39; // 左边的右边 颜色
            }, {
              offset: 0.5,
              color: &#39;#5ad6d9&#39; // 右边的左边 颜色
            }, {
              offset: 1,
              color: &#39;#3dc8ca&#39;
            }]
        })
      }
      this.chart.setOption({
        backgroundColor: &#39;#010d3a&#39;,
        //提示框
        tooltip: {
          trigger: &#39;axis&#39;,
          formatter: "{b} : {c}",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: &#39;shadow&#39; // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
          }
        },
        /**区域位置*/
        grid: {
          left: &#39;10%&#39;,
          right: &#39;10%&#39;,
          top: &#39;10%&#39;,
          bottom: &#39;10%&#39;,
        },
        //X轴
        xAxis: [{
          data: this.xData,
          type: &#39;category&#39;,
          show: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: &#39;rgba(255,255,255,1)&#39;,
              shadowColor: &#39;rgba(255,255,255,1)&#39;,
              // shadowOffsetX: &#39;20&#39;
            },
            symbol: [&#39;none&#39;, &#39;arrow&#39;],
            symbolOffset: [0, 25]
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 20,
            fontSize: 10
          }
        }],
        yAxis: {
          show: true,
          splitNumber: 4,
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: &#39;dashed&#39;,
              color: &#39;#075858&#39;
            },
          },
          axisLabel: {
            show: true,
            color: &#39;#FFFFFF&#39;,
            margin: 30,
            fontSize: 15
          }
        },
        series: [
          {//数据颜色
            name: &#39;日付费用户数&#39;,
            type: &#39;bar&#39;,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: (params) => {
                  return colors[params.dataIndex % 4];
                }
              }
            },
            label: {
              show: true,
              position: [barWidth / 2, -(barWidth + 20)],
              color: &#39;#ffffff&#39;,
              fontSize: 14,
              fontStyle: &#39;bold&#39;,
              align: &#39;center&#39;
            },
            data: this.yBarData          },
          {//底
            z: 2,
            type: &#39;pictorialBar&#39;,
            data: this.yBarData,
            symbol: &#39;diamond&#39;,
            symbolOffset: [0, &#39;50%&#39;],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                color: (params) => {
                  return colors[params.dataIndex % 4]
                }
              }
            }
          },
          {//顶
            z: 3,
            type: &#39;pictorialBar&#39;,
            symbolPosition: &#39;end&#39;,
            data: this.yBarData,
            symbol: &#39;diamond&#39;,
            symbolOffset: [0, &#39;-50%&#39;],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                borderWidth: 0,
                 color: (params) => {
                  return colors[params.dataIndex % 4].colorStops[0].color;
                }
              }
            }
          }
        ]
      }, true)
    }
  }}</script>

위 js 코드에는 다음과 같은 주의사항이 있습니다.

• 색상 선택: colors[params.dataIndex % 4]를 this.colorOptions[params.dataIndex % 4]로 바꿀 수 있습니다. 즉, 정의된 colorOptions를 사용합니다. 색상 채우기를 위한 코드에서colors[params.dataIndex % 4]替换为this.colorOptions[params.dataIndex % 4]，即使用代码中定义的colorOptions进行颜色填充
• colorStops保证了立体的效果
• 代码中colors[params.dataIndex % 4]中的4的选取是可变的，保证索引值在colors变量的长度范围内。例如：本例中colors长度为4，params.dataIndex % 4
colorStops는 3차원 효과를 보장합니다

colors[params.dataIndex % 4] 코드에서 에서 4를 선택하면 인덱스 값이 색상 변수의 길이 범위 예: 이 예에서 색상의 길이는 4이고 params.dataIndex % 4는 4를 초과하지 않습니다. 위의 막대 차트를 인용하여

할 수 있습니다. 다음 코드를 적용하세요:

<template>
  <bar-chart></bar-chart></template>

<script>import barChart from "./components/barChart"export default {
  name: &#39;barchart&#39;,
  components: {  barChart }}</script>

권장 학습: "vue video tutorial"🎜🎜🎜

위 내용은 vue를 사용하여 세로 막대형 차트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!