详解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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 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
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
javascript json 新手入门文档
2009/12/03 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
vue 实现微信浮标效果
2019/09/01 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python字符串,数值计算
2016/10/05 Python
Python可变参数用法实例分析
2017/04/02 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python的range和linspace使用详解
2019/11/27 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
大学运动会入场词
2014/02/22 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
作文之亲情600字
2019/09/23 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python