suchen

Heim >Web-Frontend >js-Tutorial >Wie verwenden Vue-Dateien echarts.js? (Zwei Methoden werden eingeführt)

Wie verwenden Vue-Dateien echarts.js? (Zwei Methoden werden eingeführt)

不言
不言nach vorne
2018-10-18 17:09:584447Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Verwendung von echarts.js in Vue-Dateien. (Es werden zwei Methoden vorgestellt), die einen gewissen Referenzwert haben. Ich hoffe, dass sie für Sie hilfreich sind.

Ich muss Echarts in meiner letzten Arbeit verwenden, da das Projekt mit vue-cli entwickelt wird. Ich habe in Vue synthetisierte Vue-Echarts im Internet gefunden, wollte aber nicht das in Vue angegebene Datenformat verwenden, also habe ich eine einfache Demo des Vue-Projekts erstellt, die auf native Echarts verweist. Der Implementierungsprozess ist wie folgt: Zwei Implementierungen Methoden werden verwendet

Vorbereitung

1. Echarts-Abhängigkeiten installieren

Konsoleneingabe: npm install echarts --save

2. Globaler Import

Eingeführt in main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Diagramme erstellen

Der erste Weg zum Erstellen

Führen Sie mehrere Diagramme in ein ein .vue-Datei Diagramm

  • WelcomePage.vue erstellen

<template>
  <div>
    <h1>第一种在vue中使用echart的方式</h1>

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

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

  </div>
</template>
<script>
// 引入基本模板,按需加载
  let echarts = require(&#39;echarts/lib/echarts&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/bar&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/pie&#39;);
  require(&#39;echarts/lib/component/tooltip&#39;);
  require(&#39;echarts/lib/component/title&#39;);


export default {
  name: "WelcomePage",
  data () {
    return {  }
  },
  mounted(){
    this.drawBar();
    this.drawPie();
  },
  methods:{
    drawBar(){
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById(&#39;barGraph&#39;));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: &#39;全年产量趋势图&#39;,
          left: &#39;center&#39;
        },
        tooltip: {
          trigger: &#39;item&#39;,
          formatter: &#39;{a} <br/>{b} : {c}&#39;
        },
        legend: {
          left: &#39;center&#39;,
          data: [&#39;本年&#39;, &#39;上年&#39;],
          bottom:0
        },
        xAxis: {
          type: &#39;category&#39;,
          name: &#39;x&#39;,
          splitLine: {show: false},
          data: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]
        },
        grid: {
          left: &#39;1%&#39;,
          right: &#39;2%&#39;,
          bottom: &#39;8%&#39;,
          containLabel: true
        },
        yAxis: {
          type: &#39;category&#39;,
          name: &#39;y&#39;,
          splitLine: {show: true},
          data:[&#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;]
        },
        series: [
          {
            name: &#39;本年&#39;,
            type: &#39;line&#39;,
            data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
          },
          {
            name: &#39;上年&#39;,
            type: &#39;line&#39;,
            data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
          },
        ]
      })
    },
    drawPie(){
      let pieGraph = echarts.init(document.getElementById(&#39;pieGraph&#39;));
      pieGraph.setOption({
        title : {
          text: &#39;某站点用户访问来源&#39;,
          subtext: &#39;纯属虚构&#39;,
          x:&#39;center&#39;
        },
        tooltip : {
          trigger: &#39;item&#39;,
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: &#39;vertical&#39;,
          left: &#39;left&#39;,
          data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
        },
        series : [
          {
            name: &#39;访问来源&#39;,
            type: &#39;pie&#39;,
            radius : &#39;55%&#39;,
            center: [&#39;50%&#39;, &#39;60%&#39;],
            data:[
              {value:335, name:&#39;直接访问&#39;},
              {value:310, name:&#39;邮件营销&#39;},
              {value:234, name:&#39;联盟广告&#39;},
              {value:135, name:&#39;视频广告&#39;},
              {value:1548, name:&#39;搜索引擎&#39;}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
              }
            }
          }
        ]
      })
    }
  }
}
</script>

Der Effekt ist wie folgt:

Wie verwenden Vue-Dateien echarts.js? (Zwei Methoden werden eingeführt)

Die zweite Implementierungsmethode (in Form von Komponenten)

Erstellen Sie die übergeordnete Komponente Father.vue

  <div>
    <h1>{{ msg }}</h1>
    <p>第二种方式：通过组件的方式进行页面渲染</p>
    <div>
      <bar-graph></bar-graph>
    </div>

    <div>
      <pie-graph></pie-graph>
    </div>

  </div>
rrree

  • Erstellen Sie die Unterkomponente barGraph.vue

<script>
// 引入两个子组件
  import BarGraph from "./bargraph";
  import PieGraph from "./piegraph";
  export default {
    name: "father",
    components:{
      BarGraph,
      PieGraph,
    },
    data(){
      return{
        msg: &#39;我是爸爸，想看我的儿子，眼睛请往下移&#39;,
      }
    }
  }
</script>
   <div>
    <p>{{ msg }}</p>
    <div>
      <div></div>
    </div>
  </div>

  • Erstellen Sie pieGraph.vue

<script>
  let echarts = require(&#39;echarts/lib/echarts&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/bar&#39;);
  require(&#39;echarts/lib/component/tooltip&#39;);
  require(&#39;echarts/lib/component/title&#39;);

  // import echarts from &#39;echarts&#39;

    export default {
      name: "bargraph",
      // props:[&#39;id&#39;],  // 第一种接收父亲传过来的值的方式
      props: {
        id: {
          type: String,
          default: &#39;chart&#39;
        }
      },
      data(){
          return {
            msg: "我是第一个子组件--bar",
            chart: null,
          }
      },
      mounted(){
        this.drawBar();
      },
      methods:{
        drawBar(){
          this.chart = echarts.init(document.getElementById(this.id));
          let colors = [&#39;#5793f3&#39;, &#39;#d14a61&#39;, &#39;#675bba&#39;];
          this.chart.setOption(
            {
              color: colors,

              tooltip: {
                trigger: &#39;axis&#39;,
                axisPointer: {
                  type: &#39;cross&#39;
                }
              },
              grid: {
                right: &#39;20%&#39;
              },
              toolbox: {
                feature: {
                  dataView: {show: true, readOnly: false},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              legend: {
                data:[&#39;蒸发量&#39;,&#39;降水量&#39;,&#39;平均温度&#39;]
              },
              xAxis: [
                {
                  type: &#39;category&#39;,
                  axisTick: {
                    alignWithLabel: true
                  },
                  data: [&#39;1月&#39;,&#39;2月&#39;,&#39;3月&#39;,&#39;4月&#39;,&#39;5月&#39;,&#39;6月&#39;,&#39;7月&#39;,&#39;8月&#39;,&#39;9月&#39;,&#39;10月&#39;,&#39;11月&#39;,&#39;12月&#39;]
                }
              ],
              yAxis: [
                {
                  type: &#39;value&#39;,
                  name: &#39;蒸发量&#39;,
                  min: 0,
                  max: 250,
                  position: &#39;right&#39;,
                  axisLine: {
                    lineStyle: {
                      color: colors[0]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} ml&#39;
                  }
                },
                {
                  type: &#39;value&#39;,
                  name: &#39;降水量&#39;,
                  min: 0,
                  max: 250,
                  position: &#39;right&#39;,
                  offset: 80,
                  axisLine: {
                    lineStyle: {
                      color: colors[1]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} ml&#39;
                  }
                },
                {
                  type: &#39;value&#39;,
                  name: &#39;温度&#39;,
                  min: 0,
                  max: 25,
                  position: &#39;left&#39;,
                  axisLine: {
                    lineStyle: {
                      color: colors[2]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} °C&#39;
                  }
                }
              ],
              series: [
                {
                  name:&#39;蒸发量&#39;,
                  type:&#39;bar&#39;,
                  data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                  name:&#39;降水量&#39;,
                  type:&#39;bar&#39;,
                  yAxisIndex: 1,
                  data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },
                {
                  name:&#39;平均温度&#39;,
                  type:&#39;line&#39;,
                  yAxisIndex: 2,
                  data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
              ]
            }
          )
        }
      }
    }
</script>
<template>
    <div>
      <p>{{ msg }}</p>

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

Der Effekt wird wie folgt umgesetzt:

Wie verwenden Vue-Dateien echarts.js? (Zwei Methoden werden eingeführt)

Wie verwenden Vue-Dateien echarts.js? (Zwei Methoden werden eingeführt)

  • Die Routing-Datei lautet wie folgt: 

<script>
  import echarts from &#39;echarts&#39;

    export default {
      name: "piegraph",
      props:{
        id: {
          type: String,
          default: &#39;pieChart&#39;
        }
      },
      data(){
          return{
            msg: &#39;我是第二个子组件--pie&#39;,
            pieChart: null
          }
      },
      mounted(){
          this.drawPie();
      },
      methods: {
        drawPie () {
          this.pieChart = echarts.init(document.getElementById(this.id));
          this.pieChart.setOption(
            {
              title : {
                text: &#39;某站点用户访问来源&#39;,
                subtext: &#39;纯属虚构&#39;,
                x:&#39;center&#39;
              },
              tooltip : {
                trigger: &#39;item&#39;,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: &#39;vertical&#39;,
                left: &#39;left&#39;,
                data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
              },
              series : [
                {
                  name: &#39;访问来源&#39;,
                  type: &#39;pie&#39;,
                  radius : &#39;55%&#39;,
                  center: [&#39;50%&#39;, &#39;60%&#39;],
                  data:[
                    {value:335, name:&#39;直接访问&#39;},
                    {value:310, name:&#39;邮件营销&#39;},
                    {value:234, name:&#39;联盟广告&#39;},
                    {value:135, name:&#39;视频广告&#39;},
                    {value:1548, name:&#39;搜索引擎&#39;}
                  ],
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
                    }
                  }
                }
              ]
            }
          )
        }
      }
    }
</script>

Das obige ist der detaillierte Inhalt vonWie verwenden Vue-Dateien echarts.js? (Zwei Methoden werden eingeführt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

echarts npm JS
Stellungnahme：
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Erklärung des virtuellen Dom- und Diff-Algorithmus in React (mit Code)Nächster Artikel：Erklärung des virtuellen Dom- und Diff-Algorithmus in React (mit Code)

In Verbindung stehende Artikel

Mehr sehen