echarts——横向柱状图

功能描述

全屏横向柱状图
从小到大排序，每次显示5条，每3秒切换循环显示
鼠标移入停止切换，鼠标移出继续切换

柱状图组件源码

<template><div class="w100 h100"><div ref="bar" class="w100 h100"></div></div>
</template><script>
import { ququ } from "../../public/static/theme/ququ"; // 引入主题
export default {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,},],current: 1, // 当前页total: null, // 总页数timerId: null, // 定时器};},mounted() {/*** 需求：* 1、对数据进行从小到大排序,分为5个一组* 2、每隔3S切换一组展示，页面销毁清除定时器* 3、当鼠标移入图表停止切换，鼠标移出开启切换*/this.init();this.update();this.openTimer();},beforeDestroy() {clearInterval(this.timerId);},methods: {// 初始化图表init() {this.$echarts.registerTheme("ququ", ququ); // 注册主题this.barChart = this.$echarts.init(this.$refs.bar, "ququ"); // 使用主题初始化// 监听鼠标移入移出事件this.barChart.on("mouseover", (params) => {console.log(params);clearInterval(this.timerId);});this.barChart.on("mouseout", () => {this.openTimer();});},// 获取并处理数据，然后渲染图表update() {// 排序this.barData = this.barData.sort((a, b) => a.value - b.value);// 总页数this.total =this.barData.length % 5 == 0? this.barData.length / 5: parseInt(this.barData.length / 5) + 1;// 当前显示的5条数据let list = this.barData.slice((this.current - 1) * 5, this.current * 5);// 当前X、Y轴数据let barDataY = list.map((item) => item.name);let barDataX = list.map((item) => item.value);let option = {// 标题title: {text: "▍横向柱状图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全left: 40,top: 40,textStyle: {fontSize: 60,color: "#fff",},},// 坐标轴grid: {top: "15%",left: "5%",right: "3%",bottom: "5%",containLabel: true, //是否包含坐标轴的文字},// X轴：横向柱状图，将xAxis的type设置为valuexAxis: {type: "value",},// Y轴：横向柱状图，将xAxis的type设置为categoryyAxis: {type: "category",data: barDataY,},// 图表内容series: [{type: "bar", // 图表类型data: barDataX, // 数据barWidth: 66, // 柱的宽度// 柱上面的数值配置label: {show: true, // 显示值position: "right", // 显示位置color: "white",},// 每一个条目的样式配置itemStyle: {barBorderRadius: [0, 34, 34, 0], // 圆角// 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: "#5050ee" },{ offset: 1, color: "#ab6ee5" },]),},},],// 提示框设置tooltip: {trigger: "axis", //触发类型——坐标轴// 鼠标移入条目下面的背景axisPointer: {type: "line",z: 0,lineStyle: {color: "rgba(225,225,225,.3)",width: 65,},},},};// 生成图表this.barChart.setOption(option);},// 定时切换当前展示页码openTimer() {if (this.timerId) {clearInterval(this.timerId);}this.timerId = setInterval(() => {if (this.current < this.total) {this.current++;} else {this.current = 1;}this.update();}, 6000);},},
};
</script>

option配置项的拆分

initOption：初始化的静态配置
dataOption：获取到动态数据后的数据配置
screenOption：适配屏幕分辨率大小的配置

// 每一次set option 是合并的关系，所以可以拆分在不同的时机设置不同的
this.barChart.setOption(option);

加上适配屏幕和option拆分的代码

<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,},],current: 1, // 当前页total: null, // 总页数timerId: null, // 定时器};},mounted() {/*** 需求：* 1、对数据进行从小到大排序,分为5个一组* 2、每隔3S切换一组展示，页面销毁清除定时器* 3、当鼠标移入图表停止切换，鼠标移出开启切换*/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");// 拆分option：1、静态配置在初始化的时候先注册，每一次setOption是合并关系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设置为valuexAxis: {type: "value",},// Y轴：横向柱状图，将xAxis的type设置为categoryyAxis: {type: "category",},// 图表内容series: [{type: "bar", // 图表类型// 柱上面的数值配置label: {show: true, // 显示值position: "right", // 显示位置color: "white",},// 每一个条目的样式配置itemStyle: {// 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: "#5050ee" },{ offset: 1, color: "#ab6ee5" },]),},},],// 提示框设置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() {// 排序this.barData = this.barData.sort((a, b) => a.value - b.value);// 总页数this.total =this.barData.length % 5 == 0? this.barData.length / 5: parseInt(this.barData.length / 5) + 1;// 当前显示的5条数据let list = this.barData.slice((this.current - 1) * 5, this.current * 5);// 当前X、Y轴数据let barDataY = list.map((item) => item.name);let barDataX = list.map((item) => item.value);// 拆分option：2、data配置在获取导数据的时候注册，每一次setOption是合并关系let dataOption = {// Y轴：横向柱状图，将xAxis的type设置为categoryyAxis: {data: barDataY,},// 图表内容series: [{data: barDataX, // 数据},],};// 生成图表this.barChart.setOption(dataOption);},// 定时切换当前展示页码openTimer() {if (this.timerId) {clearInterval(this.timerId);}this.timerId = setInterval(() => {if (this.current < this.total) {this.current++;} else {this.current = 1;}this.getData();}, 6000);},// 监听屏幕变化screenResize() {this.$nextTick(() => {// 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸let width = this.$refs.bar.offsetWidth;let size = (width / 100) * 3.6; // 定义一个基准尺寸// 拆分option：3、受屏幕大小影响的配置在屏幕改变的时候setlet screenOption = {// 标题title: {textStyle: {fontSize: size, //标题大小},},// 图表内容series: [{barWidth: size, // 柱的宽度// 每一个条目的样式配置itemStyle: {barBorderRadius: [0, size / 2, size / 2, 0], // 圆角},},],// 提示框设置tooltip: {// 鼠标移入条目下面的背景axisPointer: {lineStyle: {width: size,},},},};this.barChart.setOption(screenOption);// 更新图表this.barChart.resize();});},},
};
</script>

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

echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色
效果图如下话不多说,直接上代码.  <template><v-chart cl ...
Echarts横向柱状图：叠加、堆叠(stack)以及点击事件
html <div class="box" id="echartModel" style="background-color: #191e3e; ...
echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用. head中引入js文件: <script src="/static/frame/echarts/echarts.min. ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
堆叠横向柱状图顶部显示数值和
效果图不想写太多过不了审核下面代码 // num num1 num2 在全局定义 let num = 0 option = {tooltip: {trigger: "axis" ...
用Java制作左右横向柱状图_横向柱状图
Echarts绘制横向柱状图(圆角+渐变) var myChart = echarts.init(document.getElementById('main'));//初始化数据 var catego ...

echarts——横向柱状图

功能描述

柱状图组件源码

option配置项的拆分

加上适配屏幕和option拆分的代码

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

最新文章

热门文章