Echarts 柏拉图

客官°小女子只卖身不卖艺 2022-03-25 15:44 262阅读 0赞

一、实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodW5odWExOTg4MTk4Nw_size_16_color_FFFFFF_t_70][]

二、实现脚本：

> 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.echartsjs.com_examples_editor.html_c_mix-line-bar]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodW5odWExOTg4MTk4Nw_size_16_color_FFFFFF_t_70]: /images/20220325/660a943373d64036a23f2a747623319f.png
[https_www.echartsjs.com_examples_editor.html_c_mix-line-bar]: https://www.echartsjs.com/examples/editor.html?c=mix-line-bar
[https_www.cnblogs.com_gebizhuifenren_p_7747798.html]: https://www.cnblogs.com/gebizhuifenren/p/7747798.html
[https_www.cnblogs.com_wush-1215_p_9376773.html]: https://www.cnblogs.com/wush-1215/p/9376773.html