echarts常见图形-横向柱状图(六)

横向柱状图-不同颜色，自动轮播

1.最终效果图
2.echarts文件(jgjcssl.js)
3.vue文件中
- 3.1 html
- 3.2 js逻辑处理(引入jgjcssl.js)

1.最终效果图

2.echarts文件(jgjcssl.js)

export const jgjcsslOption = (colorList, dataNames, dataValue, timer) => {// let dataValue = [100, 200, 300, 500, 600, 700, 900, 1300];// let dataNames = [//   "检查植保站",//   "种植业管理处",//   "五大湖鱼育办",//   "种业处",//   "质检处",//   "渔政处",//   "渔业处",//   "池港监督局"// ];// let colorList = [//   "#0242B2",//   "#2567B1",//   "#468DB2",//   "#1D9F7D",//   "#50A7AE",//   "#6C995B",//   "#A08F44",//   "#965B25",//   "#00BFFF",//   "#7FFF00",//   "#FFA500",//   "#CC3366",//   "#DCDCDC"// ];let option = {textStyle: {fontFamily: "BebasNeue"},tooltip: {axisPointer: {type: "shadow",textStyle: {color: "#fff"}},formatter: function(params) {clearInterval(timer);return `<span>${params.name}:${params.value}</span><br/>`;}},// color: colors,grid: {borderWidth: 0,top: "0%",bottom: "12%",left: "34%",right: "5%",textStyle: {color: "#fff"}},// legend: {//   icon: "circle",//   right: "4%",//   top: "8%",//   textStyle: {//     color: "#90979c"//   },//   data: []// },calculable: true,xAxis: [{type: "value",trigger: "axis",axisLine: {lineStyle: {color: "#115080"}},splitLine: {show: true,lineStyle: {color: "#115080"}},axisTick: {show: false},splitArea: {show: false},axisLabel: {interval: 0,textStyle: {color: "#59c9f9",fontSize: 12}}// "data": [],}],yAxis: [{type: "category",splitLine: {show: false},splitNumber: 4,axisLine: {lineStyle: {color: "#115080",type: "dashed"}},axisTick: {show: false},axisLabel: {interval: 0,show: true,margin: 10,textStyle: {color: "#59c9f9",fontSize: 12}},splitArea: {show: false},data: dataNames}],dataZoom: [{show: false,type: "slider",filterMode: "filter",yAxisIndex: 0, //选择x轴还是Y轴 xAxisIndex   //y轴zoomLock: true, //是否锁定 , true 只能平移,不能缩放 false都可以startValue: 0, //限制显示数据 多少个endValue: 7, //从第一个开始 限制5个数据// height: 10,width: 5,left: "33%",textStyle: {color: "#a5b7c5"}}],series: [{// name: "一级",type: "bar",stack: "总量",barMaxWidth: 8,barGap: "5%",itemStyle: {normal: {// color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [//   {//     offset: 0,//     color: "#21a184"//   },//   {//     offset: 1,//     color: "#0b3b5b"//   }// ])// borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [//   {//     offset: 0,//     color: "#21a184"//   },//   {//     offset: 1,//     color: "#0b3b5b"//   }// ])color: function(params) {return colorList[dataNames.indexOf(params.name)];}}},data: dataValue},{name: "总量",type: "pictorialBar",barGap: "-100%",symbol: "rect",symbolPosition: "end",symbolSize: [2, 8],symbolOffset: [4, 0],data: dataValue.map((x, index) => {return {value: x,itemStyle: {color: colorList[index]}};})}]};return option;
};

3.vue文件中

3.1 html

<div style="width:30vh;height:30vh" ref="jgjcsslEchart"></div>

3.2 js逻辑处理(引入jgjcssl.js)

<script>import { jgjcsslOption } from "@/assets/js/hlwjg/jgjcssl"; //监管检查实施量export default {data(){},methods: {//监管检查实施量jgjcssl() {let jgjcsslEchart = this.$echarts.init(this.$refs.jgjcsslEchart);let colorList = ["#0242B2","#2567B1","#468DB2","#1D9F7D","#50A7AE","#6C995B","#A08F44","#965B25","#00BFFF","#7FFF00","#FFA500","#CC3366","#DCDCDC"];let dataValue = [],dataNames = [];let _this = this;this.timer = setInterval(function() {_this.dataValue2 = dataValue.splice(dataValue.length - 1, 1).toString();_this.dataNames2 = dataNames.splice(dataNames.length - 1, 1).toString();_this.colorList2 = colorList.splice(colorList.length - 1, 1).toString();dataNames.unshift(_this.dataNames2);dataValue.unshift(_this.dataValue2);colorList.unshift(_this.colorList2);jgjcsslEchart.setOption(jgjcsslOption(colorList, dataNames, dataValue, _this.timer));jgjcsslEchart.resize();}, 20000);jgjcsslEchart.setOption(jgjcsslOption(colorList, dataNames, dataValue, null));jgjcsslEchart.resize();},// 初始化图形initEcharts() {let jgjcsslEchart = this.$echarts.init(this.$refs.jgjcsslEchart);//监管检查实施量window.addEventListener("resize", function() {jgjcsslEchart.resize(); //监管检查实施量});}},mounted() {this.jgjcssl();//监管检查实施量this.initEcharts(); }}
</script>

echarts常见图形-横向柱状图(六)相关推荐

echarts常见图形-折线图(三)
折线图 1.最终效果图 2.echarts文件(ndfx.js) 3.vue文件中 3.1 html 3.2 js逻辑处理(引入ncplxfx.js) 1.最终效果图 2.echarts文件(ndfx ...
Matplotlib常见图形绘制（折线图、散点图、柱状图、直方图、饼图）
Matplotlib能够绘制折线图.散点图.柱状图.直方图.饼图. 我们需要知道不同的统计图的意义,以此来决定选择哪种统计图来呈现我们的数据. 1 常见图形种类及意义折线图:以折线的上升或下降来表示 ...
echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
数据分析基础学习_Matplotlib_常见图形及绘制（折线图/散点图/柱状图/直方图/饼图）
1.3 常见图形及绘制 matplotlib可以绘制折线图.散点图.柱状图.直方图.饼图 1.3.1 常见图形种类及意义折线图:以折线的上升或下降来表示统计量的增减变化的统计图特点:可以显示数据的 ...
echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用. head中引入js文件: <script src="/static/frame/echarts/echarts.min. ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
Origin: 常见图形参数设置（汇总篇）
Origin: 常见图形参数设置(汇总篇) (一)坐标轴的设置 1. 坐标轴刻度的调整 2. 坐标轴网格线的设置 3. 坐标轴重叠及特殊刻度线设置 (二)图例的设置 1. 图例的调整 2. 图例横向展 ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
MPAndroidChart项目实战（七）——自定义横向柱状图
本文出自:http://blog.csdn.net/dt235201314/article/details/77248347 一丶效果演示二丶需求分析技术点 1.产品要求,显示每个品类的占比,形成对 ...

echarts常见图形-横向柱状图(六)

横向柱状图-不同颜色，自动轮播

1.最终效果图

2.echarts文件(jgjcssl.js)

3.vue文件中

3.1 html

3.2 js逻辑处理(引入jgjcssl.js)

echarts常见图形-横向柱状图(六)相关推荐

最新文章

热门文章