Echarts 柏拉图

一、实现效果：

二、实现脚本：

app.title = '柏拉图';

option = {

//添加横线滚动条，解决数据太多时重叠显示
dataZoom: {
start: 0, //默认为0
end: 100 - 1500 / 31, //默认为100
type: 'slider',
show: true,
xAxisIndex: [0,1],//需要缩放显示的横坐标的序号，多个用逗号分隔；[0,1]指分别缩放显示柱状图和折线图
handleSize: 0, //滑动条的左右2个滑动条的大小
height: 15, //组件高度
left: 20, //左边的距离
right: 20, //右边的距离
bottom: 30, //右边的距离
handleColor: '#CBBCDB', //h滑动图标的颜色
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 2,
background: "#CBBCDB",
shadowColor: "#CBBCDB",
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#CBBCDB'
}, {
offset: 1,
color: '#CBBCDB'
}]),
backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
selectedMode: false,
data:['蒸发量','平均温度']
},
xAxis: [
{
type: 'category',

//显示横坐标中对应值的坐标线（竖线）：默认不显示
//splitLine:{show:true},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
splitLine:false
},{
type: 'category',
show:false,
boundaryGap : false,
data: ['', '1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
splitLine:false
}
],
yAxis: [
{
type: 'value',

splitLine:false, //纵坐标轴上的各个值对应的横线是否显示：默认显示
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
splitLine:false, //纵坐标轴上的各个值对应的横线是否显示：默认显示
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'蒸发量',
type:'bar',

barCategoryGap: '0',//柱状图之间的空隙为0

//设置柱状图的颜色
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#5e7e54','#e44f2f','#81b6b2','#eba422','#5e7e54',
'#e44f2f','#81b6b2','#eba422','#5e7e54','#e44f2f'
];
return colorList[params.dataIndex]
},

//设置柱状图边框线颜色
//barBorderColor: 'black',
//设置柱状图边框线的显示宽度
//barBorderWidth:0.5
}
},
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'平均温度',
type:'line',
//显示数字
itemStyle :
{
normal: {
label :
{
show: true,
//格式化
formatter: '{c}%'
}
}
},
xAxisIndex: 1,
yAxisIndex: 1,
data:[0, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};

三、demo网址：https://www.echartsjs.com/examples/editor.html?c=mix-line-bar

四、参照网址：https://www.cnblogs.com/gebizhuifenren/p/7747798.html

echarts图表缩放功能参照网址：https://www.cnblogs.com/wush-1215/p/9376773.html

Echarts 柏拉图相关推荐

Echarts作图之柏拉图
Echarts版本:2.2.7 <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
echarts折柱混线图根据后台数据动态刷新显示数据
我电脑没有可以制作动图的软件,之前用office自带的PowerPoint录制视频但因为其它原因也无法录制了,所以页面效果我暂时放几张相连的图片展示效果哈,见谅: 整体思路: 为了便于理解,我将后台获 ...
Echart 制作柏拉图——带二八法则线
一.使用场景制作柏拉图,带二八法则线,柱状图显示不同的颜色,折点显示占比,在接近80%的折点的右方显示虚线到坐标轴位置, 要求图片二.使用echarts制图,脚本如下: app.title = ' ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...

Echarts 柏拉图

Echarts 柏拉图相关推荐

最新文章

热门文章