search

Home  >  Article  >  Web Front-end  >  How do vue files use echarts.js? (Two methods are introduced)

How do vue files use echarts.js? (Two methods are introduced)

不言
不言forward
2018-10-18 17:09:584404browse

The content of this article is about how to use echarts.js in vue files? (Two methods are introduced), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I need to use echarts in my recent work, because the project is developed using vue-cli. I found vue-echarts synthesized in vue on the Internet, but I didn’t want to use the data format specified in vue, so I made a simple demo of the vue project referencing native echarts. The implementation process is as follows: Two implementation methods are used

Preparation

1. Install echarts dependencies

Console input: npm install echarts --save

2.Global import

Introduced into main.js

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

Create charts

The first way to create

Introduce multiple charts into a .vue file Chart

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

The effect is as follows:

How do vue files use echarts.js? (Two methods are introduced)

The second implementation method (in the form of a component)

Create the parent component father.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>

  • Create subcomponent 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>

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

The effect is as follows :

How do vue files use echarts.js? (Two methods are introduced)

How do vue files use echarts.js? (Two methods are introduced)

  • #The routing file is as follows: 

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
        }
      ]
    },
  ]
})

The above is the detailed content of How do vue files use echarts.js? (Two methods are introduced). For more information, please follow other related articles on the PHP Chinese website!

echarts npm JS
Statement：
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Explanation of virtual dom and diff algorithm in React (with code)Next article：Explanation of virtual dom and diff algorithm in React (with code)

Related articles

See more