Echarts横向堆叠柱状图和markLine实例详解
目录
- 1.Echarts 横向堆叠柱状图 + markLine
- 效果图
- 代码如下：
- 2.Echarts 横向堆叠柱状图 + markLine
- 效果图
- 代码如下
- 总结
1.Echarts 横向堆叠柱状图 + markLine
效果图
根据月份计算百分比展示markLine
思路： 根据月份计算百分比展示markLine，例如3月就是25%，这里的图表是数值，所以markLine要展示百分比需要进行一下计算，思路是在series里添加一个专门为了markLine处理的（这里是双柱子所以要采用这种方法，如果是单个柱子就不需要，可以直接在series里边项写markLine），具体计算方式在option代码上面，大家自行看一下这里不复制重复写了
验证：我这里的x轴隐藏掉了，大家为了验证计算的对不对可以把axisLabel show: 改为true,对比下数值和markLine值是否正确
代码如下：
mychart() {
var myChart = echarts.init(document.getElementById('profitTotal6'));
let echartData = [{
name: "其他",
value1: 64,
value2: 84,
},
{
name: "运输",
value1: 104,
value2: 164,
},
{
name: "化工",
value1: 619.59,
value2: 354.00,
},
{
name: "煤炭",
value1: 338.01,
value2: 154.00,
},
{
name: "光伏",
value1: 248.69,
value2: 934.00,
},
{
name: "风电",
value1: 556.43,
value2: 654.00,
},
{
name: "水电",
value1: 816.31,
value2: 354.00,
},
{
name: "火电",
value1: 221.87,
value2: 154.00,
}
];
let xAxisData = echartData.map(v => v.name);
let yAxisData1 = echartData.map(v => v.value1);
let yAxisData2 = echartData.map(v => v.value2);
let bgdata = [];
echartData.map(item => {
bgdata.push(parseInt(item.value1 + item.value2) + 100);
})
let maxxAxis = Math.max.apply(null,bgdata);//设置x轴最大值
let date_ = new Date();
let month = date_.getMonth() + 1;
let markyAxis = maxxAxis / 12 * month; //markLine值
let markyvalueText = parseInt(markyAxis / maxxAxis * 100); //为了控制百分样式
let paddingStyle;//根据数值动态设置padding样式
if (0 <= markyvalueText && markyvalueText < 10) {
paddingStyle = [10, 7];
} else if (10 <= markyvalueText && markyvalueText < 100) {
paddingStyle = [10, 5];
} else {
paddingStyle = [14, 5];
}
option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
legend: {
data: ['年度投资完成额(滞后)', '年度投资计划'],
orient: "horizontal",//vertical
x: 'center',
// y: 'bottom',
// right: '-50%',
bottom: '2%',
icon: "roundRect1",
selectedMode: false,//取消图例上的点击事件
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10,// 设置间距
textStyle: {//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: '8%',
top: '18%',
right: '8%',
bottom: '12%',
containLabel: true
},
yAxis: {
type: 'category',
triggerEvent: true,
data: xAxisData,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
},
},
xAxis: {
type: 'value',
max: maxxAxis,
nameTextStyle: {
color: '#4F88BD',
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: 'Microsoft YaHei',
},
axisLine: {
show: false,
lineStyle: {
color: "#0C4F81"
}
},
axisLabel: {
show: false,//
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
},
},
series: [
{
name: '年度投资完成额(滞后)',
type: 'bar',
barMaxWidth: 15,
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
label: {
show: true,
// position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "rgba(128, 123, 254, 1)"
},
{
offset: 1,
color: "rgba(230, 143, 252, 1)"
}
]),
}
},
data: yAxisData1,
},
{
name: '年度投资计划',
type: 'bar',
barMaxWidth: 15,
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
label: {
show: true,
// position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(13, 78, 137, 1)"
},
{
offset: 1,
color: "rgba(13, 78, 137, 1)"
}
]),
}
},
data: yAxisData2,
},
{
// 为了处理markline
name: '最长背景',
type: 'bar',
barMaxWidth: 5,
color: 'transparent',
data: bgdata,
markLine: {
data: [
{ name: '考核临界线',xAxis:markyAxis},
],
silent: true,
symbol:'none',//去掉箭头
itemStyle: {
normal: {
lineStyle: {
color: '#FA7F3C',
type: 'solid'
},
label:{
// color: '#FA7F3C',
formatter:'{c}%',
show:true,
backgroundColor: '#FFF7F2',
color: '#DB6525',
fontSize: '100%',
borderColor: '#FFF7F2',
formatter: function(v){
var s = parseInt(v.value / maxxAxis * 100);
return s + '%';
},
padding:paddingStyle,
borderRadius: 50,
}
}
},
},
},
]
};
myChart.clear();
myChart.setOption(option);
},
2.Echarts 横向堆叠柱状图 + markLine
效果图
根据数据计算百分比展示markLine
代码如下
根据数据计算百分比展示markLine，和上面基本同理，这个只是数值上的转换，和月份没有关系了
mychart() {
var myChart = echarts.init(document.getElementById('profitTotal2'));
let echartData = [{
name: "其他",
value1: 64,
value2: 84,
},
{
name: "运输",
value1: 104,
value2: 164,
},
{
name: "化工",
value1: 619.59,
value2: 354.00,
},
{
name: "煤炭",
value1: 338.01,
value2: 154.00,
},
{
name: "光伏",
value1: 248.69,
value2: 934.00,
},
{
name: "风电",
value1: 556.43,
value2: 654.00,
},
{
name: "水电",
value1: 816.31,
value2: 354.00,
},
{
name: "火电",
value1: 221.87,
value2: 154.00,
}
];
let xAxisData = echartData.map(v => v.name);
let yAxisData1 = echartData.map(v => v.value1);
let yAxisData2 = echartData.map(v => v.value2);
let bgdata = [];
echartData.map(item => {
bgdata.push(parseInt(item.value1 + item.value2) + 100);
})
let maxxAxis = Math.max.apply(null,bgdata);//设置x轴最大值
let markyAxis = maxxAxis * 0.9; //markLine值90%
let markyvalueText = parseInt(markyAxis / maxxAxis * 100); //为了控制百分样式
let paddingStyle;//根据数值动态设置padding样式
if (0 <= markyvalueText && markyvalueText < 10) {
paddingStyle = [10, 7];
} else if (10 <= markyvalueText && markyvalueText < 100) {
paddingStyle = [10, 5];
} else {
paddingStyle = [14, 5];
}
option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
legend: {
data: ['合同总额（预警）', '项目概算'],
orient: "horizontal",//vertical
x: 'center',
// y: 'bottom',
// right: '-50%',
bottom: '2%',
icon: "roundRect1",
selectedMode: false,//取消图例上的点击事件
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10,// 设置间距
textStyle: {//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: '8%',
top: '18%',
right: '8%',
bottom: '12%',
containLabel: true
},
yAxis: {
type: 'category',
triggerEvent: true,
data: xAxisData,
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
},
},
xAxis: {
type: 'value',
max: maxxAxis,
nameTextStyle: {
color: '#4F88BD',
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: 'Microsoft YaHei',
},
axisLine: {
show: false,
lineStyle: {
color: "#0C4F81"
}
},
axisLabel: {
show: false,
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
},
},
series: [
{
name: '合同总额（预警）',
type: 'bar',
barMaxWidth: 15,
// zlevel: 1,
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
label: {
show: true,
// position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "rgba(252, 175, 159, 1)"
},
{
offset: 1,
color: "rgba(241, 88, 135, 1)"
}
]),
}
},
data: yAxisData1,
},
{
name: '项目概算',
type: 'bar',
barMaxWidth: 15,
// zlevel: 1,
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
label: {
show: true,
// position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(13, 78, 137, 1)"
},
{
offset: 1,
color: "rgba(13, 78, 137, 1)"
}
]),
}
},
data: yAxisData2,
},
{
// 为了处理markline
name: '最长背景',
type: 'bar',
barMaxWidth: 5,
// barGap: '-100%',
color: 'transparent',
// itemStyle: {
// normal: {
// color: '#1B375E',
// barBorderRadius: 0,
// },
// },
data: bgdata,
markLine: {
data: [
{ name: '考核临界线',xAxis:markyAxis},
],
silent: true,
symbol:'none',//去掉箭头
itemStyle: {
normal: {
lineStyle: {
color: '#FA7F3C',
type: 'solid'
},
label:{
formatter:'{c}%',
show:true,
backgroundColor: '#FFF7F2',
color: '#DB6525',
fontSize: '100%',
borderColor: '#FFF7F2',
formatter: function(v){
var s = parseInt(v.value / maxxAxis * 100);
return s + '%';
},
padding:paddingStyle,
borderRadius: 50,
}
}
},
},
},
]
};
myChart.clear();
myChart.setOption(option);
},
总结
到此这篇关于Echarts横向堆叠柱状图和markLine的文章就介绍到这了,更多相关Echarts堆叠柱状图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue echarts实现横向柱状图
本文实例为大家分享了vue echarts实现横向柱状图的具体代码,供大家参考,具体内容如下 实现效果: 代码: <template> <div class="OverYearsPompany"> <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div> </div>
-
在vue中使用echarts(折线图的demo,markline用法)
公司最近在用vue开发项目,项目接近尾声了,趁休息时间写点demo-- vue引入echarts(折线图的demo) 主要是解决引入echarts,markline的使用(基准线) 这是demo的效果图: vue脚手架不多赘述 1.安装依赖 cnpm install echarts -S 2.在main.js中引入echarts import echarts from 'echarts' 3.在main.js中安装 Vue.prototype.echarts = echarts; 一般来说能正常
-
echarts如何实现带百分比的横向柱状图
目录 实例代码 效果图 代码解析 总结 实例代码 var data = [220, 182, 191, 234, 290, 120, 65, 444]; var barWidth = 20; var maxNum = 0; for (var i = 0; i < data.length; i++) { if (data[i] > maxNum) { maxNum = data[i]; } } option = { backgroundColor: 'black', grid: { top: '
-
vue echarts实现柱状图动态展示
本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码,供大家参考,具体内容如下 轮播图形式展现 <template> <div class="dan"> <div id="scalesize" :style="{width: '100%', height: '100%'}"></div> </div> </template> <script> i
-
如何实现echarts markline标签名显示自己想要的
效果图: 修改方法: 补充知识:echarts markLine 的标签名称如何显示在线上方? markLine里的padding设置一下就到线上方了 效果图: 以上这篇如何实现echarts markline标签名显示自己想要的就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
详解vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts 1.1 安装 使用如下命令通过 npm 安装 ECharts npm install echarts --save 注:本文安装Echarts版本为:“echarts”: “5.2.1” 1.2 引入 安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件:
-
vue+echarts实现堆叠柱状图
本文实例为大家分享了vue+echarts实现堆叠柱状图的具体代码,供大家参考,具体内容如下 echarts-子组件 <template> <div class="chart" ref="chartEle"></div> </template> <script> import echarts from "echarts"; import eventBus from '@/componen
-
Echarts基本入门之柱状图、折线图通用配置
1echarts的基本步骤 四步 1 找dom容器 2 初始化Init 3 配置options 4 setOptions 几乎124的步骤是一样的,options是配置项,想呈现什么图标就配什么. 最基本的带最大值最小值的柱状图 2 平均值 markLine属性 3 数值显示 柱宽度, 横向柱状图 数值显示 label属性 柱宽度 barWidth 横向的话只需要注意两个轴的转变就行 通用配置 即饼图散点图通用的配置 title 标题 tooltip: 提示 toolbox 工具按钮 legen
-
Echarts横向堆叠柱状图和markLine实例详解
目录 1.Echarts 横向堆叠柱状图 + markLine 效果图 代码如下: 2.Echarts 横向堆叠柱状图 + markLine 效果图 代码如下 总结 1.Echarts 横向堆叠柱状图 + markLine 效果图 根据月份计算百分比展示markLine 思路: 根据月份计算百分比展示markLine,例如3月就是25%,这里的图表是数值,所以markLine要展示百分比需要进行一下计算,思路是在series里添加一个专门为了markLine处理的(这里是双柱子所以要采用这种方法
-
Echarts图表分析巴西队历年战绩实例详解
目录 引言 一.源数据 二.安装Echarts 三.背景图实现 四.拐点自定义 五.线条区域渐进色 六.x轴拖拽 七.X轴设置 八.y轴设置 写在最后 引言 在结束的卡塔尔世界杯八分之一决赛中,巴西队以4:1轻松战胜韩国队,连续八届世界杯晋级八强,我的心情无比的激动,看着自己喜欢的球星,内心十分骄傲. 开始创作本文的时候,满怀欣喜,隐隐看到了内马尔举起了大力神杯.时间定格在12月9日,比赛的第124分钟,是的,巴西
-
在 webpack 中使用 ECharts的实例详解
Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用. npm 安装 ECharts 在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package. 你可以使用如下命令通过 npm 安装 ECharts npm instal
-
Android自定义进度条的圆角横向进度条实例详解
1.本文将向你介绍自定义进度条的写法,比较简单,但还是有些知识点是需要注意的: invalidate()方法 RectF方法的应用 onMeasure方法的应用 2.原理 画3层圆角矩形,底层为黑色,第二层为灰色,最上一层为进度条颜色,示例图如下: 3.效果图 实现圆角进度条还有很多其他方法,比如在Progress控件里填充圆角图片,通过拉伸图片来达到预想的效果,虽然听起来很简单,但实现起来还是有些麻烦的. 4.解说方法 (1)invalidate()方法 invalidate()是用来刷新
-
Flutter快速制作一个水印组件实例详解
目录 正文 通过child属性将水印叠加给子组件 createWatermark方法 Watermark组件的完整代码 正文 项目开发的过程中,经常会遇到添加水印的需求,其作用无非就是防止重要信息通过截图外传.(虽然我觉得并没有什么卵用,但领导的需求是不容质疑的) 那么,作为一线码农的我,也只能屁颠屁颠的开搞. 通过child属性将水印叠加给子组件 水印组件,既然是组件,就是需要发扬Flutter套娃的精神,通过child属性将水印叠加给子组件. class Watermark extends
-
基于 D3.js 绘制动态进度条的实例详解
D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于
-
对python生成业务报表的实例详解
本文介绍一个用python结合xlsxwriter自动生成业务报表的程序.这里的业务数据采用的是指定的值,真实情况下需要其他程序来接入数据. # -*- coding: utf-8 -*- import xlsxwriter workbook = xlsxwriter.Workbook('chart.xlsx') worksheet = workbook.add_worksheet() # 指定类型为柱状图 chart = workbook.add_chart({'type': 'column'
-
Android开心消消乐代码实例详解
突然想要在android上写一个消消乐的代码,在此之前没有系统地学过java的面向对象,也没有任何android相关知识,不过还是会一点C++.8月初开始搭建环境,在这上面花了相当多的时间,然后看了一些视频和电子书,对android有了一个大概的了解,感觉差不多了的时候就开始写了. 疯狂地查阅各种资料,反反复复了好几天后,也算是写出了个成品.原计划有很多地方还是可以继续写下去的,比如UI设计,比如动画特效,时间设计,关卡设计,以及与数据库的连接,如果可以的话还能写个联网功能,当然因为写到后期内心
-
python爬取天气数据的实例详解
就在前几天还是二十多度的舒适温度,今天一下子就变成了个位数,小编已经感受到冬天寒风的无情了.之前对获取天气都是数据上的搜集,做成了一个数据表后,对温度变化的感知并不直观.那么,我们能不能用python中的方法做一个天气数据分析的图形,帮助我们更直接的看出天气变化呢? 使用pygal绘图,使用该模块前需先安装pip install pygal,然后导入import pygal bar = pygal.Line() # 创建折线图 bar.add('最低气温', lows) #添加两线的数据序列 b