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 相关文章推荐
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
3种vue组件的书写形式
Nov 29 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
在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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php实例分享之二维数组排序
2014/05/15 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python 自动识别并连接串口的实现
2021/01/19 Python
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
学校卫生检查制度
2014/02/03 职场文书