詳解vue文件中使用echarts.js的兩種方式

更新時間：2018年10月18日 11:18:33 作者：Nanana

這篇文章主要介紹了詳解vue文件中使用echarts.js的兩種方式，主要介紹了兩種使用方式，一種是以組件的形式另一種直接引入，非常具有實用價值，需要的朋友可以參考下

最近工作中需要用到echarts，由于項目是用的vue-cli開發(fā)的。在網(wǎng)上搜到vue中合成了vue-echarts，但是不想使用vue中規(guī)定好的數(shù)據(jù)格式，于是就自己做了一個vue項目引用原生echarts的簡單demo，實現(xiàn)過程如下：用了兩種實現(xiàn)方式

準備工作

1、安裝echarts依賴

控制臺輸入：npm install echarts --save

2、全局引入

main.js中引入

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

創(chuàng)建圖表

第一種創(chuàng)建方式

在一個.vue文件中引入多張圖表

創(chuàng)建WelcomePage.vue

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

 <div class="charts">
  <div id="barGraph" style="height: 350px;"></div>
 </div>

 <div class="charts">
  <div id="pieGraph" style="height: 350px;"></div>
 </div>

 </div>
</template>

<script>
// 引入基本模板,按需加載
 let echarts = require('echarts/lib/echarts');
 // 引入柱狀圖
 require('echarts/lib/chart/bar');
 // 引入柱狀圖
 require('echarts/lib/chart/pie');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');


export default {
 name: "WelcomePage",
 data () {
 return { }
 },
 mounted(){
 this.drawBar();
 this.drawPie();
 },
 methods:{
 drawBar(){
  // 基于dom，初始化echarts實例
  let barGraph = echarts.init(document.getElementById('barGraph'));
  // 繪制圖表
  barGraph.setOption({
  title: {
   text: '全年產(chǎn)量趨勢圖',
   left: 'center'
  },
  tooltip: {
   trigger: 'item',
   formatter: '{a} <br/> : {c}'
  },
  legend: {
   left: 'center',
   data: ['本年', '上年'],
   bottom:0
  },
  xAxis: {
   type: 'category',
   name: 'x',
   splitLine: {show: false},
   data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  grid: {
   left: '1%',
   right: '2%',
   bottom: '8%',
   containLabel: true
  },
  yAxis: {
   type: 'category',
   name: 'y',
   splitLine: {show: true},
   data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
  },
  series: [
   {
   name: '本年',
   type: 'line',
   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: '上年',
   type: 'line',
   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('pieGraph'));
  pieGraph.setOption({
  title : {
   text: '某站點用戶訪問來源',
   subtext: '純屬虛構(gòu)',
   x:'center'
  },
  tooltip : {
   trigger: 'item',
   formatter: "{a} <br/> : {c} (bv2fm77%)"
  },
  legend: {
   orient: 'vertical',
   left: 'left',
   data: ['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
  },
  series : [
   {
   name: '訪問來源',
   type: 'pie',
   radius : '55%',
   center: ['50%', '60%'],
   data:[
    {value:335, name:'直接訪問'},
    {value:310, name:'郵件營銷'},
    {value:234, name:'聯(lián)盟廣告'},
    {value:135, name:'視頻廣告'},
    {value:1548, name:'搜索引擎'}
   ],
   itemStyle: {
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
   }
   }
  ]
  })
 }
 }
}
</script>

實現(xiàn)效果如下圖：

第二種實現(xiàn)方式（以組件的形式）

創(chuàng)建父組件 father.vue

 <div>
 <h1>{{ msg }}</h1>
 <p>第二種方式：通過組件的方式進行頁面渲染</p>
 <div class="container" >
  <bar-graph></bar-graph>
 </div>

 <div class="container">
  <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: '我是爸爸，想看我的兒子，眼睛請往下移',
  }
 }
 }
</script>

創(chuàng)建子組件barGraph.vue

 <div>
 <p>{{ msg }}</p>
 <div class="charts">
  <div :id="id" style="min-height: 350px;"></div>
 </div>
 </div>

<script>
 let echarts = require('echarts/lib/echarts');
 // 引入柱狀圖
 require('echarts/lib/chart/bar');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');

 // import echarts from 'echarts'

 export default {
  name: "bargraph",
  // props:['id'], // 第一種接收父親傳過來的值的方式
  props: {
  id: {
   type: String,
   default: 'chart'
  }
  },
  data(){
   return {
   msg: "我是第一個子組件--bar",
   chart: null,
   }
  },
  mounted(){
  this.drawBar();
  },
  methods:{
  drawBar(){
   this.chart = echarts.init(document.getElementById(this.id));
   let colors = ['#5793f3', '#d14a61', '#675bba'];
   this.chart.setOption(
   {
    color: colors,

    tooltip: {
    trigger: 'axis',
    axisPointer: {
     type: 'cross'
    }
    },
    grid: {
    right: '20%'
    },
    toolbox: {
    feature: {
     dataView: {show: true, readOnly: false},
     restore: {show: true},
     saveAsImage: {show: true}
    }
    },
    legend: {
    data:['蒸發(fā)量','降水量','平均溫度']
    },
    xAxis: [
    {
     type: 'category',
     axisTick: {
     alignWithLabel: true
     },
     data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    }
    ],
    yAxis: [
    {
     type: 'value',
     name: '蒸發(fā)量',
     min: 0,
     max: 250,
     position: 'right',
     axisLine: {
     lineStyle: {
      color: colors[0]
     }
     },
     axisLabel: {
     formatter: '{value} ml'
     }
    },
    {
     type: 'value',
     name: '降水量',
     min: 0,
     max: 250,
     position: 'right',
     offset: 80,
     axisLine: {
     lineStyle: {
      color: colors[1]
     }
     },
     axisLabel: {
     formatter: '{value} ml'
     }
    },
    {
     type: 'value',
     name: '溫度',
     min: 0,
     max: 25,
     position: 'left',
     axisLine: {
     lineStyle: {
      color: colors[2]
     }
     },
     axisLabel: {
     formatter: '{value} °C'
     }
    }
    ],
    series: [
    {
     name:'蒸發(fā)量',
     type:'bar',
     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:'降水量',
     type:'bar',
     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:'平均溫度',
     type:'line',
     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>

創(chuàng)建pieGraph.vue

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

  <div class="charts">
  <div :id="id" style="min-height: 350px;"></div>
  </div>
 </div>
</template>

<script>
 import echarts from 'echarts'

 export default {
  name: "piegraph",
  props:{
  id: {
   type: String,
   default: 'pieChart'
  }
  },
  data(){
   return{
   msg: '我是第二個子組件--pie',
   pieChart: null
   }
  },
  mounted(){
   this.drawPie();
  },
  methods: {
  drawPie () {
   this.pieChart = echarts.init(document.getElementById(this.id));
   this.pieChart.setOption(
   {
    title : {
    text: '某站點用戶訪問來源',
    subtext: '純屬虛構(gòu)',
    x:'center'
    },
    tooltip : {
    trigger: 'item',
    formatter: "{a} <br/> : {c} (pxjwmzl%)"
    },
    legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
    },
    series : [
    {
     name: '訪問來源',
     type: 'pie',
     radius : '55%',
     center: ['50%', '60%'],
     data:[
     {value:335, name:'直接訪問'},
     {value:310, name:'郵件營銷'},
     {value:234, name:'聯(lián)盟廣告'},
     {value:135, name:'視頻廣告'},
     {value:1548, name:'搜索引擎'}
     ],
     itemStyle: {
     emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
     }
    }
    ]
   }
   )
  }
  }
 }
</script>

效果實現(xiàn)如下：

路由文件如下：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: