" 2. Übergeben Sie „mounted(){this .fetchData ()window.addEventListener('resize',()=>{if (this.chart){...}" Implementieren Sie einfach das dreidimensionale Histogramm."/> " 2. Übergeben Sie „mounted(){this .fetchData ()window.addEventListener('resize',()=>{if (this.chart){...}" Implementieren Sie einfach das dreidimensionale Histogramm.">

Heim >Web-Frontend >Front-End-Fragen und Antworten >So implementieren Sie ein Säulendiagramm mit Vue

So implementieren Sie ein Säulendiagramm mit Vue

藏色散人
藏色散人Original
2023-01-29 14:12:222641Durchsuche

So implementieren Sie ein Säulendiagramm mit vue: 1. Erstellen Sie ein Div mit dem Attribut „

"; mount() {this.fetchData()window.addEventListener('resize',()=>{if (this.chart){...}" kann das dreidimensionale Histogramm realisieren.

So implementieren Sie ein Säulendiagramm mit Vue

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, DELL G3-Computer

Wie verwende ich Vue, um ein Säulendiagramm zu implementieren?

vue implementiert ein dreidimensionales Säulendiagramm

Der Stil ist wie gezeigt Unten:
So implementieren Sie ein Säulendiagramm mit Vue

Sie können sich ein dreidimensionales Säulendiagramm wie folgt vorstellen: Es besteht aus yData + unten + oben und der entsprechende Code lautet wie folgt:

<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>

Im obigen js-Code gibt es die folgenden Vorsichtsmaßnahmen:

  • Farbauswahl: Sie können colors[params.dataIndex % 4] durch this.colorOptions[params.dataIndex % 4] ersetzen, also die definierten colorOptions verwenden im Code für die Farbfüllungcolors[params.dataIndex % 4]替换为this.colorOptions[params.dataIndex % 4],即使用代码中定义的colorOptions进行颜色填充
  • colorStops保证了立体的效果
  • 代码中colors[params.dataIndex % 4]中的4的选取是可变的,保证索引值在colors变量的长度范围内。例如:本例中colors长度为4,params.dataIndex % 4
  • colorStops sorgt für einen dreidimensionalen Effekt

colors[params.dataIndex % 4] im Code Die Auswahl von 4 in ist variabel und stellt sicher, dass der Indexwert innerhalb liegt Der Längenbereich der Farbvariablen. Beispiel: In diesem Beispiel beträgt die Länge der Farben 4 und params.dataIndex % 4 überschreitet nicht 4. Nur

Um das obige Balkendiagramm zu zitieren: Sie können den folgenden Code anwenden:

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

Empfohlenes Lernen: „vue-Video-Tutorial“🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Säulendiagramm mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn