vue使用echarts实现水平柱形图实例


Posted in Javascript onSeptember 09, 2020

文件结构:

vue使用echarts实现水平柱形图实例

testData.js文件

const dtuEdition = {
 name: '有方有线',
 number: 60,
 proportion: 40,
 edition: {
 '有方有线V1.0.0': 20,
 '有方有线V1.2.0': 15,
 '有方有线V2.0.1': 10,
 '有方有线V3.0.0': 8,
 '有方有线V3.2.0': 5,
 '有方有线V3.4.0': 4,
 '有方有线V4.0.0': 3,
 '有方有线V4.0.2': 2,
 '有方有线V4.0.3': 1
 }
} 
export default {
 namespaced: true, // 用于在全局引用此文件里的方法时标识这一个的文件名
 dtuEdition
}

dtuDistributionCurve.js文件

// DTU连接率bar图的option
let barOption = {
 grid: {
 // width: '85%', // 设置gird宽度
 left: 40, // gird距离容器左边距
 right: 65,
 top: 20,
 bottom: 0,
 containLabel: true
 },
 xAxis: {
 show : false, // 不显示横轴
 type: 'value',
 max: 1000, // 横轴最大值
 },
 yAxis: {
 type: 'category',
 data: [],
 axisLine: {
  show: false
 },
 axisTick: {
  show: false
 },
 splitLine: {
  show: false
 }
 },
 series: [{
 type: 'bar',
 stack: 'chart',
 z: 3,
 itemStyle: {
  normal: {
  color: '#a7c7e9'
  }
 },
 data: []
 }, {
 type: 'bar',
 stack: 'chart',
 silent: true,
 label: {
  normal: {
  formatter: (params) => {
   // console.log(params)
   return barOption.xAxis.max-params.value
  },
  color: '#666666',
  position: 'right',
  distance: 10,
  show: true
  }
 },
 itemStyle: {
  normal: {
  color: '#f3f3f6'
  }
 },
 barWidth : 10,//柱图宽度
 data: []
 }]
}
 
// 设置y轴标签
export function setYAxisData(edition) {
 let data = []
 for (let key in edition) {
 data.push(key)
 }
 barOption.yAxis.data = data.reverse()
 console.log(barOption.yAxis.data)
}
 
// 设置x轴最大值
export function setXAxisMax(number) {
 barOption.xAxis.max = number
}
 
// 设置series的data数据
export function setSeriesData(edition, number) {
 let data0 = []
 let data1 = []
 for(let key in edition) {
 data0.push(edition[key])
 data1.push(number - edition[key])
 }
 barOption.series[0].data = data0.reverse()
 barOption.series[1].data = data1.reverse()
}
 
export default {
 barOption,
 setYAxisData,
 setXAxisMax,
 setSeriesData
}

vue文件

<template>
 <div ref="dtuEdition" class="project-survey-dtu-edition"></div>
</template>
 
<script>
 import testData from '../constvalue/testData'
 import dtuDistributionOption from '../curveoption/dtuDistributionCurve'
 export default {
  name: 'ProjectSurvey',
  data() {
   return {
 dtuEditionChart: null
 }
  },
 
  methods: {
 // 点击DTU模块数量分布展示图的扇区item
 distributionChartClick(param) {
 console.log(param)
 let dtuEdition = testData.dtuEdition
 this.dtuName = dtuEdition.name
 this.dtuNumber = dtuEdition.number
 this.dtuProportion = dtuEdition.proportion + '%'
 dtuDistributionOption.setYAxisData(dtuEdition.edition)
 dtuDistributionOption.setXAxisMax(dtuEdition.number)
 dtuDistributionOption.setSeriesData(dtuEdition.edition, dtuEdition.number)
 this.dtuEditionChart.setOption(dtuDistributionOption.barOption)
 this.dtuEditionChart.resize()
 },
 // 点击tab的某页
 tabClick(tab, event) {
 console.log(this.activeName)
 if(this.activeName === 'first') { // 从后端获取连接率统计数据
 
 } else { // 从后端获取模块数量分布展示数据
  let distributionInfo = testData.dtuDistribution.distributionInfo
  this.deadline = testData.dtuDistribution.deadline
  dtuDistributionOption.setSectorValue(distributionInfo)
    dtuDistributionOption.setSectorName(testData.dtuDistribution.allDistribution)
  this.distributionChart.setOption(dtuDistributionOption.pieOption)
  this.distributionChart.resize()
  this.distributionChart.on('click', this.distributionChartClick)
 }
 }
 },
 mounted() {
 this.dtuEditionChart = this.$echarts.init(this.$refs.dtuEdition)
 this.distributionChart = this.$echarts.init(this.$refs.dtuDistribution)
 let maxV = this.getMaxV()
 let minV = this.getMinV()
 for(let item of this.connectionInfo) {
 this.charts[item.dtuName] = this.$echarts.init(document.getElementById(item.dtuName))
 let normalizationRatio = this.normalization(item.connectionRatio, maxV, minV)
 dtuConnectionOption.setSectorColor(normalizationRatio)
 dtuConnectionOption.setTitleText(item.dtuName)
 dtuConnectionOption.setSectorValue(item.connectionRatio)
 dtuConnectionOption.setSectorName(item.connectionRatio)
 // console.log(dtuConnectionOption.option)
 this.charts[item.dtuName].setOption(dtuConnectionOption.option)
 this.charts[item.dtuName].resize()
 }
 window.onresize = () => {
 this.distributionChart.resize()
 this.dtuEditionChart.resize()
  }
 },
 updated() {
 this.distributionChart.resize()
 for(let item of this.connectionInfo) {
 this.charts[item.dtuName].resize()
 }
 } 
 
 }
</script>
 
<style>
 .project-survey-dtu-edition {
 height: 580px;
 }
</style>

图表

vue使用echarts实现水平柱形图实例

补充知识:vue+echart实现 X轴 双柱状图 渐变色

一: 安装

1. 首先需要安装echarts依赖包

npm install echarts -S

2. 或者使用国内的淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

二: 创建图表

全局引入

main.js

>```javascript
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

export default {
 data(){
  return {}
 }, 
  mounted(){
  this.myChart() //函数调用
  },
  methods:{
  	myChart(){
	  let myChart= this.$echarts.init(document.getElementById('myChart'));
	  // var colors = ['rgba(15,115,255,0.6)', 'rgba(15,235,255,0.6)'];
	  var data1 = [350, 250, 170, 360, 240];
	  var data2 = [187, 146, 129, 174,245];
	  var xData = ['3.12','3.13','3.14','3.15','3.16']
	  rightBtns.setOption({
   // backgroundColor:'#fff',
   tooltip: {
    trigger: "axis",
    // formatter: '{b}<br/>{a1}-违规率:{c1}<br/>{a0}-违规率:{c0}',
    axisPointer: {
     type: "shadow",
     textStyle: {
     color: "#fff"
     }
    },
   },
   grid: {
    top: '8%',
    right: '8%',
    bottom: '60%'
   },
   legend: {
    data: ['省内', '省外'],
    align: 'left',
    left: '30%',
    top: '4%',
    textStyle:{
     color:'#fff'
    }
   },
   calculable: true,
   xAxis: [{
    type: "category",
    data: xData,
    axisLine: {
    lineStyle: {
     color: 'rgba(255,255,255,0.1)'
    },
    },
    axisLabel: {
    show: true,
    textStyle: {
     color: '#fff'
    }
    },
   }],
   yAxis: {
    type: 'value',
    // name:'单位:(人次 )',
    min: 0,
    max: 500,
    interval: 100,
    axisLine: {
    lineStyle: {
     color: 'rgba(255,255,255,0.1)'
    }
    },
    splitLine: {
    lineStyle: {
     type: 'dashed',
    },
    show:false
    },
    axisLabel: {
    show: true,
    textStyle: {
     color: '#fff'
    }
    },
   },
   series: [{
    name: '省内',
    type: 'bar',
    // color: colors[0],
    data: data1,
    itemStyle:{
     normal: {
     //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
     //此处的箭头函数是为了不改变this的指向
     color: (params) => {
      var index = params.dataIndex;
      var colorList = [
      // 渐变颜色的色值和透明度
      //双柱状图渐变的 第一个柱子的渐变色['rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)'],
      ['rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)'] 
      
      ];
      if(params.dataIndex >= colorList.length){
      index=params.dataIndex-colorList.length;
      }
      //方法一:
      //不使用箭头函数的写法改变渐变色
      // return {
      // colorStops: [{
      //  offset: 0, //颜色开始的位置
      //  color: colorList[0][index] // 0% 处的颜色
      // },{
      //  offset: 0.6, //颜色结束的位置
      //  color: colorList[1][index] // 100% 处的颜色
      // }]
      // }
      //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色
      return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
      {offset: 0.2, color: colorList[1][index]},
      {offset: 1, color: colorList[0][index]}
      ])
     }
     }
    }
   },
   {
    name: '省外',
    type: 'bar',
    // color: colors[1],
    data: data2,
    itemStyle:{
     normal: {
     //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
     color: (params) => {
      var index = params.dataIndex;
      var colorList = [
      // 渐变颜色的色值和透明度
      //双柱状图渐变的 渐变第二个柱子的渐变色['rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)'],
      ['rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)'] 
      ];
      //方法一:
      //不使用箭头函数的写法改变渐变色
      // return {
      // colorStops: [{
      //  offset: 0,
      //  color: colorList[0][index] // 0% 处的颜色
      // },{
      //  offset:0.6,
      //  color: colorList[1][index] // 100% 处的颜色
      // }]
      // }
      //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色
      return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
      {offset: 0.2, color: colorList[1][index]},
      {offset: 1, color: colorList[0][index]}
      ])
     }
     }
    }
   }]
   })
  }
  }
	}

最终结果

vue使用echarts实现水平柱形图实例

以上这篇vue使用echarts实现水平柱形图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
javascript实现连续赋值
Aug 10 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 #Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 #Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 #Javascript
Vue页面跳转传递参数及接收方式
Sep 09 #Javascript
微信小程序实现身份证取景框拍摄
Sep 09 #Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 #Javascript
微信小程序实现点击生成随机验证码
Sep 09 #Javascript
You might like
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
php实现简单文件下载的方法
2015/01/30 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python多进程共享变量
2016/04/06 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python3 Random模块代码详解
2017/12/04 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python 带时区的日期格式化操作
2020/10/23 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
linux系统都有哪些运行级别
2016/03/26 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
双十佳事迹材料
2014/01/29 职场文书
世博会口号
2014/06/20 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
调研汇报材料范文
2014/08/17 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
python中redis包操作数据库的教程
2022/04/19 Python