var newchartName = ["万州", "忠县", "石柱"],newchartValue1 = ["41", "51", "29"],newchartValue2 = ["83", "81", "20"]; option = { backgroundColor: 'rgba(7,40,27,.85)', // legend: { // data: ['未开工', '未完成'], // icon: 'rect', // top: 5, // right: 10, // textStyle: { // color: '#fff', // fontWeight: 'normal', // fontSize: 12, // } // }, //提示框 tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, formatter: function(param) { var resultTooltip = "

" + "

" + param[0].name + "

" + "

" + "" + " " + param[0].seriesName + ": " + "" + param[0].value + "%" + "

" + "

" + "" + " " + param[1].seriesName + ": " + "" + param[1].value + "%" + "

" + "

" + "" + " " + param[4].seriesName + ": " + "" + (100 - param[0].value) + "%" + "

" + "

" + "" + " " + param[5].seriesName + ": " + "" + (100 - param[1].value) + "%" + "

" + "

"; return resultTooltip } }, title: [{ text: (100 - newchartValue1[0]) + '%', textAlign: 'center', textStyle: { color: "rgba(61,187,255,.3)", fontSize: 12 }, top: '20%', left: '19%' }, { text: (100 - newchartValue2[0]) + '%', textAlign: 'center', textStyle: { color: "rgba(255,146,41,.3)", fontSize: 12 }, top: '20%', left: '24%' }, { text: (100 - newchartValue1[1]) + '%', textAlign: 'center', textStyle: { color: "rgba(61,187,255,.3)", fontSize: 12 }, top: '20%', left: '48%' }, { text: (100 - newchartValue2[1]) + '%', textAlign: 'center', textStyle: { color: "rgba(255,146,41,.3)", fontSize: 12, }, top: '20%', left: '53%' }, { text: (100 - newchartValue1[2]) + '%', textAlign: 'center', textStyle: { color: "rgba(61,187,255,.3)", fontSize: 12 }, top: '20%', left: '77%' }, { text: (100 - newchartValue2[2]) + '%', textAlign: 'center', textStyle: { color: "rgba(255,146,41,.3)", fontSize: 12 }, top: '20%', left: '82.5%' } ], "grid": { "top": "25%", "left": "5%", "bottom": "10%", "right": "5%", "containLabel": true }, animation: false, "xAxis": [{ type: 'category', axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: 'rgba(0,228,255,1)', } }, axisLabel: { inside: false, textStyle: { color: '#fff', fontWeight: 'normal', fontSize: 12, } }, data: newchartName }, { type: 'category', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: false }, splitLine: { show: false }, data: newchartName }], "yAxis": [{ show: false, "type": "value", "axisLabel": { "textStyle": { "color": "#fff" }, }, "splitLine": { "lineStyle": { "color": "rgba(0,228,255,1)" } }, "axisLine": { "show": false } }], "series": [{ name: '未开工', type: 'pictorialBar', symbolSize: [18, 10], symbolOffset: ["-65%", -5], symbolPosition: 'end', z: 12, color: "#3eb6f5", zlevel: 2, data: newchartValue1 }, { name: '未完成', type: 'pictorialBar', symbolSize: [18, 10], symbolOffset: ["65%", -5], symbolPosition: 'end', z: 12, color: "#ffc241", zlevel: 2, data: newchartValue2 }, { name: '未开工', type: 'bar', barWidth: "18", itemStyle: { color: "rgba(61,187,255,.16)", borderColor: "#3eb6f5", borderWidth: 1, borderType: 'solid', }, "label": { show: true, formatter: '{c}' + '%', "position": "left", color: 'rgba(119,167,255,1)', fontSize: 12, textAlign: 'center' }, zlevel: 2, data: newchartValue1 }, { name: '未完成', type: 'bar', barWidth: "18", itemStyle: { color: "rgba(255,164,41,.16)", borderColor: "#ffc241", borderWidth: 1, borderType: 'solid', }, "label": { show: true, formatter: '{c}' + '%', "position": "right", color: 'rgba(255,228,59,1)', fontSize: 12, textAlign: 'center' }, zlevel: 2, data: newchartValue2 }, { name: '已开工', type: 'bar', xAxisIndex: 1, barGap: '50%', data: [100, 100, 100], zlevel: 1, barWidth: 16, itemStyle: { normal: { color: 'rgba(61,187,255,.16)' } } }, { name: '已完成', type: 'bar', xAxisIndex: 1, barGap: '45%', data: [100, 100, 100], zlevel: 1, barWidth: 16, itemStyle: { normal: { color: 'rgba(255,164,41,.16)' } } } ] }

Echarts在线免费图表