详解vue文件中使用echarts.js的两种方式


Posted in Javascript onOctober 18, 2018

最近工作中需要用到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>

实现效果如下图:

详解vue文件中使用echarts.js的两种方式

第二种实现方式(以组件的形式)

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

效果实现如下:

详解vue文件中使用echarts.js的两种方式

详解vue文件中使用echarts.js的两种方式

路由文件如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 #Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 #Javascript
vue中导出Excel表格的实现代码
Oct 18 #Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 #Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 #Javascript
使用JS获取页面上的所有标签
Oct 18 #Javascript
深入理解 Koa 框架中间件原理
Oct 18 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python随机读取文件实现实例
2017/05/25 Python
python验证码识别的示例代码
2017/09/21 Python
python实现人民币大写转换
2018/06/20 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
浅谈python常用程序算法
2019/03/22 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
大学生入党自荐书
2015/03/05 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书