Echarts在线免费图表

 
            // mock 数据
const dataArr = {
   xdata: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
   result: [
      { name: '天河', data: [320, 435, 490, 340, 320, 270, 360] },
      { name: '海珠', data: [150, 220, 210, 310, 140, 180, 288] },
      { name: '荔湾', data: [250, 120, 240, 280, 240, 180, 288] },
      { name: '黄埔', data: [180, 420, 370, 250, 210, 180, 288] },
      { name: '越秀', data: [130, 210, 340, 240, 220, 180, 288] },
      { name: '白云', data: [210, 260, 230, 220, 260, 180, 288] },
   ]
}
const diamondData = dataArr.result.reduce((pre, cur, index) => {
   pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
   return pre
}, [])

const color = [
   [{ offset: 0, color: "#dc0707", }, { offset: 1, color: "#af0808", }],
   [{ offset: 0, color: "#f67c20", }, { offset: 1, color: "#cc681e", }],
   [{ offset: 0, color: "#efff37", }, { offset: 1, color: "#d5e700", }],
   [{ offset: 0, color: "#32ffee", }, { offset: 1, color: "#00e8d5", }],
   [{ offset: 0, color: "#46c9ff", }, { offset: 1, color: "#00b4ff", }],
   [{ offset: 0, color: "#54a0ff", }, { offset: 1, color: "#1f83ff", }],
]

let series = dataArr.result.reduce((p, c, i, array) => {
   p.push({
      z: i + 1,
      stack: true,
      type: 'bar',
      name: c.name,
      barWidth: 30,
      data: c.data,
      itemStyle: {
         color:
            { type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: color[i] }
      },
   }, {
      z: i + 10,
      name: c.name,
      type: 'pictorialBar',
      symbolPosition: 'end',
      symbol: 'circle',
      symbolOffset: [0, '-50%'],
      symbolSize: [30, 15],
      data: diamondData[i],
      itemStyle: {
         // color: {
         // 	type: 'linear',
         // 	x: 0, x2: 0, y: 0, y2: 1,
         // 	colorStops: color[i + 1]
         // },
         color: color[i + 1] ? color[i + 1][0].color : null
      },
      tooltip: { show: false },
   })

   return p
}, [])


// 最上边顶
series.push({
   name: dataArr.result[dataArr.result.length - 1].name,
   z: 20,
   type: "pictorialBar",
   symbolPosition: "end",
   data: diamondData[diamondData.length - 1],
   symbol: "circle",
   symbolOffset: ["0%", "-50%"],
   symbolSize: [30, 15],
   itemStyle: {
      color: color[color.length - 1][0].color
   },
   tooltip: { show: false },
})

// 最下边底
series.push({
   name: dataArr.result[0].name,
   z: 30,
   type: "pictorialBar",
   symbolPosition: "start",
   data: diamondData[0],
   symbol: "circle",
   symbolOffset: ["0%", "50%"],
   symbolSize: [30, 15],
   itemStyle: {
      color: color[0][0].color
   },
   tooltip: { show: false },
})

// 背景柱子
series.push({
   z: 2,
   type: 'bar',
   barWidth: 30,
   data: diamondData[0].map(m => 2300),
   barGap: '-100%',
   itemStyle: {
      color:
      {
         type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
         colorStops: [{ offset: 0, color: "rgba(90,90,90,.2)", }, { offset: 0.5, color: "rgba(90,90,90,.2)", }, { offset: 0.5, color: "rgba(90,90,90,.1)", }, { offset: 1, color: "rgba(90,90,90,.1)", }],
      }
   },
}, {
   z: 3,
   type: "pictorialBar",
   symbolPosition: "end",
   data: diamondData[0].map(m => 2300),
   symbol: "circle",
   symbolOffset: ["0%", "-50%"],
   symbolSize: [30, 15],
   itemStyle: {
      color: 'rgba(90,90,90,0.6)'
   },
   tooltip: { show: false },
})

// 渲染
option = {
   tooltip: { trigger: "axis" },
   xAxis: {
      axisTick: { show: true },
      axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
      axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
      data: dataArr.xdata
   },
   yAxis: [{
      splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
      axisLine: { show: false, },
      axisLabel: { textStyle: { fontSize: 16, color: '#fff' } }
   }],
   grid: { top: '10%', left: '10%', right: '3%', bottom: '15%' },
   legend: {
      data: dataArr.result.map(item => item.name),
      textStyle: { fontSize: 14, color: '#fff' },
      itemWidth: 25,
      itemHeight: 15,
      itemGap: 15,
      bottom: '5%',
   },
   backgroundColor: 'rgba(0, 0, 0, .8)',
   series: series
}