var eachartPiedata = { seriesData1: [ { value: (10.36 / 19.0) * 100, Amount: 10.36, totalAmount: 19.0 }, { value: (10.36 / 106.92) * 100, Amount: 10.36, totalAmount: 106.92 }, ], seriesData2: [ { value: 100, Amount: 10.36, totalAmount: 19.0 }, { value: 100, Amount: 10.36, totalAmount: 106.92 }, ], }, option = { grid: { containLabel: true, // 显示数据的图表位于当前canvas的坐标轴 top: 50, bottom: 10, left: 10, right: 10, }, legend:{ data:[ { name: "已完成", itemStyle: { color: "#09E3EF", }, }, { name: "总计划", itemStyle: { color: "#ffc000 ", }, }, ], textStyle: { color: "rgba(255, 255, 255, 0.65)", fontSize: 12, }, itemWidth: 10, itemHeight: 10, right: "0", top: 0, }, tooltip: { trigger: "item", // show:false, confine: true, // '+params.name+ formatter: function (params) { return ( '

' + params.name.replace('(亿元)','') + '
总计划:' + params.data.totalAmount.toFixed(2) + "(亿元)" + '
已完成:' + params.data.Amount.toFixed(2) + "(亿元)

" ); }, }, xAxis: { type: "category", data: [ "年度投资计划(亿元)", "总投资(亿元)" ], axisTick: { show: false, // 不显示坐标轴刻度线 }, axisLine: { lineStyle: { width: 2, }, }, axisLabel: { show: true, interval: 0, formatter: function (value) { if (value.indexOf("年度投资计划") != -1) { return value.substring(0, 6) + "\n" + value.slice(6); } else if (value.indexOf("总投资") != -1) { return value.substring(0, 3) + "\n" + value.slice(3); } else { return value; } }, textStyle: { color: "rgba(255,255,255,0.75)", // X轴文字颜色 padding: [0, 0, 0, 0], fontSize: 12, }, }, }, yAxis: { type: "value", show:false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 axisTick:{ show:false//不显示坐标轴刻度线 }, axisLine: { show: false,//不显示坐标轴线 }, axisLabel: { show: false,//不显示坐标轴上的文字 }, }, series: [ { name: "已完成", type: "bar", barGap:'80%', barWidth: 20, data: eachartPiedata.seriesData1, label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: '#fff', fontSize: 14 }, formatter:function(params){ return params.data.Amount.toFixed(2) } }, itemStyle: { // 柱子颜色渐变 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "#09E3EF ", // 0% 处的颜色 }, { offset: 1, color: "rgba(9, 227, 239, 0.3)", // 100% 处的颜色 }, ], false ), } }, { name: "总计划", type: "bar", barWidth: 20, data: eachartPiedata.seriesData2, label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: '#fff', fontSize: 14 }, formatter:function(params){ return params.data.totalAmount.toFixed(2) } }, itemStyle: { // 柱子颜色渐变 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "#ffc000 ", // 0% 处的颜色 }, { offset: 1, color: "rgba(255,192,0, 0.3)", // 100% 处的颜色 }, ], false ), } }, ], };

Echarts在线免费图表