echarts 柏拉图
https://echarts.apache.org/examples/zh/editor.html?c=line-simple
app.title = '柏拉图';
option = {
//标题
title:{
text: '柏拉图',
left:'center' //居中显示
},
//添加横线滚动条（解决数据太多时显示重叠问题）：根据实际是否需要显示，不显示注释
// dataZoom: {
// start: 0, //默认为0
// end: 90 - 1500 / 31, //默认为100
// type: 'slider',
// show: true,
// xAxisIndex: [0,1],//需要缩放显示的横坐标的序号，多个用逗号分隔；[0,1]指分别缩放显示柱状图和折线图
// handleSize: 1, //滑动条的 左右2个滑动条的大小
// height: 15, //组件高度
// left: 20, //左边的距离
// right: 20, //右边的距离
// bottom: 20, //右边的距离
// fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
// //给第一个设置0，第四个设置1，就是垂直渐变
// offset: 0,
// color: '#3FA7DC'//横向滚动条的颜色
// }, {
// offset: 1,
// color: '#eeeeee'//横向滚动条的颜色
// }]),
// //backgroundColor: 'rgba(0, 0, 0, 0)', //两边未选中的滑动条区域的颜色
// 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'
}
}
},
grid: {
borderWidth: '10',
borderColor : '#eeeeee'
},
legend: {
//selectedMode: false,
//data:['水量','占比']
data:['','']
},
xAxis: [
{
type: 'category',
//显示横坐标中对应值的坐标线（竖线）：默认不显示
//splitLine:{show:true},
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
,{
type: 'category',
show:false,
boundaryGap : false,
data: ['', '1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [
{
type: 'value',
//纵坐标轴上的各个值对应的横线是否显示：默认显示
splitLine:false,
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '占比',
min: 0,
max: 100,
interval: 15,
//纵坐标轴上的各个值对应的横线是否显示：默认显示
splitLine:false,
//splitArea : {show : true}, //保留网格区域
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name:'水量',
type:'bar',
//柱状图之间的空隙为0
barCategoryGap: '0',
//设置柱状图的颜色
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'#5e7e54','#e44f2f','#81b6b2','#eba422','#5e7e54',
'#e44f2f','#81b6b2','#eba422','#5e7e54','#e44f2f','#2e7e04','#e00f2f'
];
return colorList[params.dataIndex]
},
//color: '#5a9bd5',
//设置柱状图边框线颜色
//barBorderColor: 'black',
//设置柱状图边框线的显示宽度
//barBorderWidth:0.2
}
},
data:[15, 10, 9, 8, 8, 8, 8, 8, 8, 7, 6, 5]
},
{
name:'占比',
type:'line',
symbolSize:10,
//拐点显示设置（新版本EChart需要设置）
symbol: function (value) {
if (value > 0) {//值大于0才显示
return 'circle'; //拐点类型
} else {
return 'none'; //拐点不显示
}
},
//显示设置
itemStyle : { normal: { label : { show: true, formatter: '{c}%' } } },//格式化
xAxisIndex: 1,
yAxisIndex: 1,
data:[0, 13, 26, 32, 42, 50, 58, 66, 74, 82, 89,95, 100]
}
,
{
type: 'scatter',
xAxisIndex: 1,
yAxisIndex: 1,
data: [[8, 82]],
//symbolSize: 0,
symbol:'none',//去掉箭头
//二八线
markLine: {
itemStyle: {
normal: {
lineStyle: {
color: "#c00",
type: 'dotted', //'dotted'虚线 'solid'实线，默认实线
width: 1
},
label: {
show: true,
}
},
//圆点加强显示
emphasis: {
color: "#d9def7"
}
},
data: [
//指定坐标点之间的线
//竖线
[
{
name: '',
xAxis: '9月',
yAxis: 82
},
{
xAxis: '9月',
yAxis: 0
}
],
//横线
[
{
name: '',
xAxis: '9月',
yAxis: 82
},
{
xAxis: '12月',
yAxis: 82
}
]
]
,symbol: ['none', 'none'],
}
}
]
};
eg
function QialityTypeCharts(Begin, End) {
$.ajax({
type: 'post',
url: "/QualityReport/GetDailyDeliveryChartsData",
dataType: "json",
data: {
BeginDate: Begin,
EndDate: End
},
success: function (res) {
debugger;
if (!res.Result) {
if (!res.Result) {
top.layer.open({
title: LangugeKey('MSG_COM_103', '提示信息'),
icon: res.IconMsg,
content: res.Msg,
btn: LangugeKey('CTL_COM_004', '确定')
});
}
}
else {
var seriesDataX = [];
var seriesData = [];
var seriesData2 = [];
var ChartsList = res.ChartsList;
if (ChartsList != null) {
for (var i = 0; i < ChartsList.length; i++) {
seriesDataX.push(ChartsList[i].Key);
seriesData.push(ChartsList[i].Series1);
seriesData2.push(ChartsList[i].Series2);
}
}
var option = {
title: {
text: '不良类型统计'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
//selectedMode: false,
//data:['水量','占比']
data: ['', '']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: [{ type: 'value', splitLine: false, name: '体积', axisLabel: { formatter: '{value} m³' } },
{ type: 'value', splitLine: false, name: '占比', min: 0, max: 100, interval: 15, splitLine: false, axisLabel: { formatter: '{value} %' } }],
xAxis: [{ type: 'category', data: seriesDataX }, { type: 'category', show: false, boundaryGap: false, data: seriesDataX }],
series: [{ name: '不良方量', type: 'bar', barCategoryGap: '10', data: seriesData }, { name: '占比', type: 'line', barCategoryGap: '10', xAxisIndex: 1, yAxisIndex: 1, data: seriesData2 },],//格式化
//itemStyle: { normal: { label: { show: true, formatter: '{c}%' } } } //格式化
};
DailyCharts.clear();
DailyCharts.setOption(option);
}
}
});
}
