Comment les fichiers vue utilisent-ils echarts.js ? (Deux méthodes sont introduites)

Le contenu de cet article explique comment utiliser echarts.js dans les fichiers vue ? (Deux méthodes sont introduites), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

J'ai besoin d'utiliser des echarts dans mon travail récent, car le projet est développé en utilisant vue-cli. J'ai trouvé des vue-echarts synthétisés dans vue sur Internet, mais je ne voulais pas utiliser le format de données spécifié dans vue, j'ai donc fait une simple démo du projet vue faisant référence aux echarts natifs. Le processus d'implémentation est le suivant : Deux implémentations. les méthodes sont utilisées

Préparation

1. Installer les dépendances echarts

Entrée de la console : npm install echarts --save

2. Importation globale

Introduit dans main.js

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

Créer des graphiques

La première façon de créer

est dans un Fichier .vue Introduisez plusieurs graphiques

• et créez WelcomePage.vue

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

L'effet est le suivant :

La deuxième méthode de mise en œuvre (sous forme de composant)

Créer le composant parent père.vue

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

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

  </div>

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

• Créer le sous-composant barGraph.vue

   <div>
    <p>{{ msg }}</p>
    <div>
      <div></div>
    </div>
  </div>

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

• Créer pieGraph. vue

<template>
    <div>
      <p>{{ msg }}</p>

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

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

L'effet est implémenté comme suit :

• Le fichier de routage est le suivant :

import WelcomePage from '@/components/WelcomePage'
import Father from '@/components/father'

import BarGraph from '@/components/bargraph'
import PieGraph from '@/components/piegraph'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'WelcomePage',
      component: WelcomePage
    },
    {
      path: '/father',
      name: 'father',
      component: Father,
      children:[
        {
          path: '/bargraph',
          name: 'bargraph',
          component: BarGraph
        },
        {
          path: '/piegraph',
          name: 'piegraph',
          component: PieGraph
        }
      ]
    },
  ]
})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!