search

Home  >  Article  >  Web Front-end  >  Can vue.js use echarts?

Can vue.js use echarts?

青灯夜游
青灯夜游Original
2020-12-21 11:43:532061browse

vue.js can use echarts. The specific operation method: 1. Enter the "npm install echarts --save" command in the console to install the echarts dependency; 2. Import it globally in main.js and you can use it. echarts creates charts.

Can vue.js use echarts?

The operating environment of this tutorial: windows7 system, vue2.9 version, this method is suitable for all brands of computers.

Related recommendations: "vue.js Tutorial"

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 introduction

Introduced into main.js

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

Create chart

The first way to create

In a Introduce multiple charts into the .vue file

Create 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(&#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 shown below:

Can vue.js use echarts?

The second implementation method (In the form of components)

Create parent component 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: &#39;我是爸爸，想看我的儿子，眼睛请往下移&#39;,
  }
 }
 }
</script>

Create subcomponent barGraph.vue

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

Effect The implementation is as follows:

Can vue.js use echarts?

Can vue.js use echarts?

The routing file is as follows: 

import WelcomePage from &#39;@/components/WelcomePage&#39;
import Father from &#39;@/components/father&#39;

import BarGraph from &#39;@/components/bargraph&#39;
import PieGraph from &#39;@/components/piegraph&#39;

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

For more programming-related knowledge, please visit: Programming teaching! !

The above is the detailed content of Can vue.js use echarts?. For more information, please follow other related articles on the PHP Chinese website!

echarts vue.js npm JS
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to separate css in vueNext article：How to separate css in vue

Related articles

See more