社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > Vue.js > vue.js能用echarts么

vue.js能用echarts么

青灯夜游
发布： 2020-12-25 09:08:22
原创
2106 人浏览过

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

vue.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(&#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>
登录后复制

实现效果如下图：

1.png

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

创建父组件 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>
登录后复制

创建子组件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>
登录后复制

创建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>
登录后复制

效果实现如下：

2.png

3.png

路由文件如下：

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
  }
  ]
 },
 ]
})
登录后复制

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

以上是vue.js能用echarts么的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
vue
来源：php.cn
上一篇：vue中如何分离css 下一篇：vue.js中如何运行项目
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在模板中使用在方法中定义的变量 这是我第一次使用Vue（v2而不是v3），并且我一直在尝试在模板内使用变量（在方法内定义）。我的简化代码：<template><divclass="co...
来自于 2024-04-06 18:10:25
0
2
513
使用 Firebase 在 Vue 中创建用户，无需登录 我创建了一个表单来创建用户配置文件。但每当我创建用户时我都会遇到问题。已登录并已登录用户注销。请帮忙解决这个问题。constsuccessCreate=()=>{create...
来自于 2024-04-06 14:20:12
0
1
514
解决Vue3 webcomponents生产构建问题 我正在尝试将我的vue2web组件迁移到vue3，尽管当我为生产创建构建时问题就出现了。我将vue-cli与--targetwc一起使用，它现在显示一个错误，指出vue3Web组件...
来自于 2024-04-06 12:43:37
0
1
473
vue vee-validate 捕获日期选择器选择的问题 我的日期选择器字段上的v-model绑定无法正常工作。当您做出选择时，它将在屏幕上实时更新，但它不会将值存储在formValues反应对象中。由于vee-validate不支持日期...
来自于 2024-04-06 11:38:56
0
1
510
有没有办法在vue中设置route prop？ 我想导航到页面中的特定选项卡this.$router.push({name:"AdminNotifications",params:{tab:"req...
来自于 2024-04-06 11:35:59
0
1
456
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板