echarts——纵向柱状图

需求

1、对数据进行从大到小排序
2、不同区间的数值的柱展示不同的渐变色
3、每隔1S图表向左平移一个柱，同时右边新增一个柱
4、当鼠标移入图表停止切换，鼠标移出开启切换

<template><div class="w100 h100"><div ref="bar" class="w100 h100"></div></div>
</template><script>
import { ququ } from "../../public/static/theme/ququ";
export default {props: {msg: String,},data() {return {barChart: null,barData: [{name: "商家1",value: 12,},{name: "商家2",value: 22,},{name: "商家3",value: 10,},{name: "商家4",value: 32,},{name: "商家5",value: 25,},{name: "商家6",value: 16,},{name: "商家7",value: 52,},{name: "商家8",value: 33,},{name: "商家9",value: 19,},{name: "商家10",value: 36,},{name: "商家11",value: 24,},{name: "商家12",value: 42,},{name: "商家13",value: 29,},{name: "商家14",value: 33,},],timerId: null, // 定时器// 默认显示前 9 条，然后定时向左平移start: 0, //默认区域缩放的起始值为0end: 8, //默认区域缩放的结束值为8};},mounted() {/*** 需求：* 1、对数据进行从大到小排序* 2、不同区间的数值的柱展示不同的渐变色* 3、每隔1S图表向左平移一个柱，同时右边新增一个柱* 4、当鼠标移入图表停止切换，鼠标移出开启切换*/this.init();this.getData();this.openTimer();// 监听屏幕大小变化window.addEventListener("resize", this.screenResize);// 一进来主动调取屏幕适配this.screenResize();},beforeDestroy() {clearInterval(this.timerId);window.removeEventListener("resize", this.screenResize);},methods: {// 初始化图表init() {this.$echarts.registerTheme("ququ", ququ);this.barChart = this.$echarts.init(this.$refs.bar, "ququ");let initOption = {// 标题title: {text: "▍纵向柱状图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全left: 40,top: 40,textStyle: {color: "#fff",},},// 坐标轴grid: {top: "15%",left: "5%",right: "3%",bottom: "5%",containLabel: true, //是否包含坐标轴的文字},// X轴xAxis: {type: "category",},// Y轴yAxis: {type: "value",},// 图表内容series: [{type: "bar", // 图表类型// 柱上面的数值配置label: {show: true, // 显示值position: "top", // 显示位置color: "white",},// 每一个条目的样式配置itemStyle: {// 不同的柱呈现不同的渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值color: (arg) => {if (arg.value > 30) {return new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#5050ee" },{ offset: 1, color: "#ab6ee5" },]);} else {return new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "green" },{ offset: 1, color: "yellow" },]);}},},},],// 提示框设置tooltip: {trigger: "axis", //触发类型——坐标轴// 鼠标移入条目下面的背景axisPointer: {type: "line",z: 0,lineStyle: {color: "rgba(225,225,225,.3)",},},},};this.barChart.setOption(initOption);// 监听鼠标移入移出事件this.barChart.on("mouseover", (params) => {console.log(params);clearInterval(this.timerId);});this.barChart.on("mouseout", () => {this.openTimer();});},// 获取并处理数据，然后渲染图表getData() {// 排序let list = this.barData.sort((a, b) => b.value - a.value);// 当前X、Y轴数据let barDataX = list.map((item) => item.name);let barDataY = list.map((item) => item.value);let dataOption = {xAxis: {data: barDataX,},// 图表内容series: [{data: barDataY, // 数据},],/*** 需求：柱状图每秒向左平移一个* 1、利用区域缩放功能，利用定时器自动模拟手动拉取* 2、通过改变startValue和endValue当前控制柱状图显示*/// 区域缩放dataZoom: {show: false, // 隐藏下方的拉动条，利用定时器自动模拟手动拉取startValue: this.start,endValue: this.end,},};// 生成图表this.barChart.setOption(dataOption);},// 定时切换当前显示的柱的索引openTimer() {if (this.timerId) {clearInterval(this.timerId);}this.timerId = setInterval(() => {this.start++;this.end++;if (this.end > this.barData.length - 1) {this.start = 0;this.end = 8;}this.getData();}, 1000);},// 监听屏幕变化screenResize() {this.$nextTick(() => {// 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸let width = this.$refs.bar.offsetWidth;let size = (width / 100) * 3.6; // 定义一个基准尺寸let screenOption = {// 标题title: {textStyle: {fontSize: size, //标题大小},},// 图表内容series: [{barWidth: size, // 柱的宽度// 每一个条目的样式配置itemStyle: {barBorderRadius: [size / 2, size / 2, 0, 0], // 圆角},},],// 提示框设置tooltip: {// 鼠标移入条目下面的背景axisPointer: {lineStyle: {width: size,},},},};this.barChart.setOption(screenOption);// 更新图表this.barChart.resize();});},},
};
</script><style scoped lang="less"></style>

echarts——纵向柱状图相关推荐

vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
echarts，柱状图配置,legend
,echarts使用: 一.鼠标悬停时不显示文字设置: option = { tooltip: { show:false, }, 二.鼠标悬停时扇形不高亮: series: [{hoverAnimat ...
vue中引入Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich
一.echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示:该柱状图在window下面只显示emoji 字符,能不能转化完全看系统支不支持 2.图中的国家标识是以emoji ...

echarts——纵向柱状图

需求

echarts——纵向柱状图相关推荐

最新文章

热门文章