详解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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
移动端js图片查看器
Nov 17 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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的FTP学习(四)
2006/10/09 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
几行js代码实现自适应
2017/02/24 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
Python 序列的方法总结
2016/10/18 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python 字符串和整数的转换方法
2018/06/25 Python
python读取LMDB中图像的方法
2018/07/02 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
复核员上岗演讲稿
2014/01/05 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
总经理岗位职责描述
2014/02/08 职场文书
土木工程专业推荐信
2014/02/19 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
优秀护士事迹材料
2014/12/25 职场文书
珍爱生命主题班会
2015/08/13 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
浅谈Web Storage API的使用
2021/06/23 Javascript
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android