说一千道一万,图标样式在【series】中修改,边距在【grid】中修改,鼠标指向显示数据在【tooltip】中修改
JS引用:
1 | <script src= "js/echarts.min.js" charset= "utf-8" type= "text/javascript" ></script> |
HTML:
1 | <div id= "ry_char" style= "height:100%;width:90%;margin-left:12%;margin-top:0.5%" ></div> |
方形立体柱状图-------JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | <script type= "text/javascript" > function cc(){ var myChart = echarts.init(document.getElementById( 'ry_char' )); const data = [220, 182, 191, 234] // 指定图表的配置项和数据 var option = { roam: false , // 禁止滚轮事件 tooltip: { show: false , }, grid: { x: '0%' , //距离左边 x2: '0%' , //距离右边 y: '15%' , // 上距离 y2: '15%' , // 下距离 }, xAxis: { axisLabel: { interval: 0, //横轴信息全部显示 rotate: 0, //0度角倾斜显示 show: true , textStyle: { color: '#333333' }, }, axisLine: { lineStyle: { color: '#B6C1C4' , }, }, axisTick: { show: false , }, data: [ '1日' , '2日' , '3日' , '4日' ] }, yAxis: { show: false , }, series: [{ name: 'a' , tooltip: { show: false }, data: data, type: 'bar' , barWidth: 10, barGap: 200, barCategoryGap: 200, // 基准线 markLine: { silent: true , // 不响应鼠标事件 symbol: [ 'none' , 'none' ], position: 'top' , label: { show: false , }, lineStyle: { normal: { color: '#D3D3D3' // 这儿设置安全基线颜色 } }, data: [{ name: '平均线' , // 支持 'average', 'min', 'max' type: 'average' }, ], }, label: { show: true , // 柱子顶部的数值 position: 'top' , top: 0, fontSize: 6, offset: [0, -10], formatter: function( params ) { let num = params .value; if (num > 1024) { return (num / 1024).toFixed(2) + 'GB' } else if (num < 1024 && num > 0) { return num.toFixed(2) + 'MB' } else { return '' ; } } }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#4729FB" // 0% 处的颜色 }, { offset: 0.5, color: "#3077F7" // 50% 处的颜色 }, { offset: 1, color: "#1FB0F4" // 100% 处的颜色 }], false ) } }, // barGap: 0 }, { type: 'bar' , barWidth: 4, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#235DFF" // 0% 处的颜色 }, { offset: 0.5, color: "#59ACF7" // 50% 处的颜色 }, { offset: 1, color: "#71CAFF" // 100% 处的颜色 }], false ) } }, barGap: 0, data: data.map(item => item + 4.5) }, { name: 'b' , tooltip: { show: false }, type: 'pictorialBar' , itemStyle: { borderWidth: 0, borderColor: '#47A6FF' , color: '#1AC0F4' , }, symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z' , symbolSize: [ '13' , '3' ], symbolOffset: [ '-1' , '-2' ], // 左右 ,上下 symbolRotate: 0, symbolPosition: 'end' , data: data, z: 3 }], // 可左右滑动 dataZoom: [{ show: false , realtime: true , start: 30, end: 50 }, { type: 'inside' , realtime: false , start: 30, end: 50, zoomOnMouseWheel: false , // 禁用滚轮 }], }; myChart.setOption(option); } </script> |
圆形立体柱状图--js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 | function render(){ myChart1 = echarts.init(document.getElementById( 'ry_char' )); var xData2 = [ "容城" , "雄县" , "安新" , "雄县" ]; var data1 = [30, 20, 30, 20]; option = { //backgroundColor: '#021132', grid: { //left: 100, //bottom: 100 }, xAxis: { data: xData2, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { interval: 0, textStyle: { color: '#fff' , fontSize: 14, }, margin: 10, //刻度标签与轴线之间的距离。 }, }, yAxis: { splitLine: { show: false , }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { // textStyle: { // color: '#fff', // fontSize: 20, // }, //不显示Y轴数值 formatter: function () { return "" ; } } }, series: [ //数据低下的圆片 { name: "" , type: "pictorialBar" , symbolSize: [25, 15], symbolOffset: [0, 10], z: 12, itemStyle: { opacity: 1, color: function ( params ) { return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#25B2E0' // 0% 处的颜色 }, { offset: 1, color: '#25B2E0' // 100% 处的颜色 }], false ) }, barBorderRadius: 10, borderWidth: 10, }, data: [1, 1, 1, 1] }, //数据的柱状图 { name: '' , type: 'bar' , barWidth: 25, barGap: '-100%' , itemStyle: { //lenged文本 opacity: 1, //这个是 透明度 color: function ( params ) { return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#33ADE0' // 0% 处的颜色 }, { offset: 1, color: '#33ADE0' // 100% 处的颜色 }], false ) } }, data: data1 }, //替代柱状图 默认不显示颜色,是最下方柱图(邮件营销)的value值 - 20 { type: 'bar' , barWidth: 25, barGap: '-100%' , stack: '' , itemStyle: { color: 'transparent' }, data: data1 }, //数据顶部的样式 { name: "" , type: "pictorialBar" , symbolSize: [25, 15], symbolOffset: [0, -8], //barWidth: 20, //showBackground: true, //barMaxWidth: 20, //barMinWidth: 5, z: 10, itemStyle: { normal: { opacity: 1, color: function ( params ) { return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#0D487E' // 0% 处的颜色 }, { offset: 1, color: '#229AD2' // 100% 处的颜色 }], false ) }, label: { show: true , //开启显示 position: 'top' , //在上方显示 textStyle: { //数值样式 color: 'green' , fontSize: 14, top: 100, }, formatter: function (param) { return param.data } } } }, symbolPosition: "end" , data: data1 }, //阴影的顶部 { name: "" , //头部 type: "pictorialBar" , symbolSize: [25, 15], symbolOffset: [0, -10], z: 10, symbolPosition: "end" , itemStyle: { color: '#0B2869' , opacity: 1, }, data: [100, 100, 100, 100] }, //后面的背景 { name: '2019' , type: 'bar' , barWidth: 25, barGap: '-100%' , z: 0, itemStyle: { color: '#0B2869' , opacity: .7, }, data: [100, 100, 100, 100] } ] }; myChart1.setOption(option); } |
渐变图js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | function loadmain3() { var cba = cbsr; var cbb = cbsc; var cbc = cbgn; var cbd = cbyc; myChart3 = echarts.init(document.getElementById( 'cb_char' )); var option3 = { title: { // text: 'Rainfall vs Evaporation', // subtext: 'Fake Data' }, tooltip: { trigger: 'axis' }, grid: { top: '10%' , // left: '10%', // right: '10%', bottom: '0.5%' , height: '80%' , containLabel: true }, // calculable: true, xAxis: [ { // type: 'category', // prettier-ignore data: [ '驶入' , '驶出' , '港内' , '重点' ], axisLabel: { show: true , color: '#fff' }, axisTick: { show: false }, axisLine: { show: false } } ], yAxis: [ { type: 'value' , splitLine: { show: false , }, axisTick: { show: false }, axisLine: { show: false }, }, ], series: [ { name: '总数量' , type: 'bar' , data: [cba, cbb, cbc, cbd], barWidth: 20, showBackground: true , barMaxWidth: 20, barMinWidth: 5, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 1, color: '#00555a' }, { offset: 0.5, color: '#01a3ad' }, { offset: 0, color: '#01eefe' }, ]) }, // markPoint: { // data: [ // { type: 'max', name: 'Max' }, // { type: 'min', name: 'Min' } // ] // }, markLine: { label: { show: true , color: '#fff' , //气泡中字体颜色 }, data: [{ type: 'average' , name: 'Avg' }] } } ] }; myChart3.setOption(option3); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步