1、引入echart 所需要的js和css,這不再引入
總量的數據是包含分量且大於等於分量
先上效果圖:
當我們查看總量時,顯示的是將分量的也包含里面,這樣就不是疊加的數量了
2、直接上代碼 (可復制代碼直接運行,前提是引入了相關的css和js)
var myChart = echarts.init(document.getElementById("chart1"), 'shine'); var option = { color:["#7179CB","#4CCEFE"], title: { text:"統計總量", textStyle:{ fontSize:16, padding:"10px" } }, legend: { data: ["總量", "分量"], }, tooltip: {}, xAxis: { data: ['a','b','c','d'] }, yAxis: { splitArea: {show: false} }, series: [ { barWidth: 20, data: ["47", "59", "95", "74",], name: "總量", type: "bar", }, { barGap: "-100%", /*這里設置包含關系,只需要這一句話*/ barWidth: 20, data: ["27", "24", "43", "10", ], name: "分量", type: "bar" } ] }; myChart.setOption(option, true);