Echart 制作柏拉图 |
您所在的位置：网站首页 › 柏拉图的 › Echart 制作柏拉图 |
Echart 制作柏拉图
|
一、使用场景 制作柏拉图，带二八法则线，柱状图显示不同的颜色，折点显示占比，在接近80%的折点的右方显示虚线到坐标轴位置， 要求图片
二、使用echarts制图，脚本如下： 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: { //color:'#f37b1d', color: function(params) { var colorList = [ '','#f37b1d','#f37b1d','#f37b1d','#f37b1d', '#f37b1d','#f37b1d','#f37b1d','#f37b1d', 'red','#f37b1d','#f37b1d','']; return colorList[params.dataIndex] }, 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'], } } ] };三、运行效果：
四、实例运行网址： https://echarts.apache.org/v4/examples/zh/editor.html?c=bar-background Examples - Apache ECharts 五、参照网址： echarts3 标线markLine_bellus-CSDN博客_echarts标线 Echarts数据可视化series-scatter散点图，开发全解+完美注释_全栈工程师开发手册（原创）(腾讯内推)-CSDN博客 横向滚动条：echarts X轴内容可滑动Y轴固定的常用配置项(解决echarts数据量太多的显示问题)_Arbort-CSDN博客 |
【本文地址】
今日新闻 |
推荐新闻 |