vue.js能用echarts么-Vue.js

vue.js能用echarts，具体操作方法：1、在控制台中输入“npm install echarts --save”命令安装echarts依赖；2、在main.js中进行全局引入，就可以使用echarts创建图表。

本教程操作环境：windows7系统、vue2.9版本，该方法适用于所有品牌电脑。

相关推荐：《vue.js教程》

最近工作中需要用到echarts，由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts，但是不想使用vue中规定好的数据格式，于是就自己做了一个vue项目引用原生echarts的简单demo，实现过程如下：用了两种实现方式

准备工作

1、安装echarts依赖

控制台输入：npm install echarts --save

2、全局引入

main.js中引入

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

创建图表

第一种创建方式

在一个.vue文件中引入多张图表

创建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: '全年产量趋势图',   left: 'center'  },  tooltip: {   trigger: 'item',   formatter: '{a} <br/>{b} : {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: '纯属虚构',   x:'center'  },  tooltip : {   trigger: 'item',   formatter: "{a} <br/>{b} : {c} ({d}%)"  },  legend: {   orient: 'vertical',   left: 'left',   data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']  },  series : [   {   name: '访问来源',   type: 'pie',   radius : '55%',   center: ['50%', '60%'],   data:[    {value:335, name:'直接访问'},    {value:310, name:'邮件营销'},    {value:234, name:'联盟广告'},    {value:135, name:'视频广告'},    {value:1548, name:'搜索引擎'}   ],   itemStyle: {    emphasis: {    shadowBlur: 10,    shadowOffsetX: 0,    shadowColor: 'rgba(0, 0, 0, 0.5)'    }   }   }  ]  }) } }}</script>

实现效果如下图：

第二种实现方式（以组件的形式）

创建父组件 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>

创建子组件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:['蒸发量','降水量','平均温度']    },    xAxis: [    {     type: 'category',     axisTick: {     alignWithLabel: true     },     data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']    }    ],    yAxis: [    {     type: 'value',     name: '蒸发量',     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:'蒸发量',     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>

创建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: '纯属虚构',    x:'center'    },    tooltip : {    trigger: 'item',    formatter: "{a} <br/>{b} : {c} ({d}%)"    },    legend: {    orient: 'vertical',    left: 'left',    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']    },    series : [    {     name: '访问来源',     type: 'pie',     radius : '55%',     center: ['50%', '60%'],     data:[     {value:335, name:'直接访问'},     {value:310, name:'邮件营销'},     {value:234, name:'联盟广告'},     {value:135, name:'视频广告'},     {value:1548, name:'搜索引擎'}     ],     itemStyle: {     emphasis: {      shadowBlur: 10,      shadowOffsetX: 0,      shadowColor: 'rgba(0, 0, 0, 0.5)'     }     }    }    ]   }   )  }  } }</script>

效果实现如下：

路由文件如下：

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

更多编程相关知识，请访问：编程教学！！

以上就是vue.js能用echarts么的知识。速戳>>知识兔学习精品课！