echarts 堆叠柱状图-顶部显示总和

最新推荐文章于 2023-11-26 23:10:09 发布

samo9527

最新推荐文章于 2023-11-26 23:10:09 发布

阅读量554

点赞数

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/samo9527/article/details/131893452

版权

效果图

VUE代码

<el-card class="box-card">
        <div ref="chart" style="height: 420px" />
    </el-card>

this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption({
        title: {
          text: '每日投屏次数图示'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.chartData.date || []
        },
        yAxis: {
          type: 'value'
        }
      });

// 柱状图公共属性
      const baseBar = {type: 'bar', barWidth: '50px', label:{show: true, position:'inside'}}    
// 每日数据图      
      let seriesData = [];   
      this.$refs.table.$children.forEach((item) => {
        if (item.prop && item.prop != "createDate") {       
          const dataList = this.chartData[item.prop] || [];
          seriesData.push(Object.assign({}, baseBar, {name: item.label, stack: 'day', data: dataList}))
        }
      });
      // 堆叠柱状图
      if (seriesData.length > 0) {
          let totalList = []
          const listSize = seriesData[0].data.length
          for (let i = 0; i < listSize; i++) {
            // 对象数据过滤并分组求和
            totalList.push(seriesData.map(current => current.data[i]).reduce((total, current) => total + current))
          }
          // 点状图显示总和
          seriesData.push({name: "总和", type: 'scatter', symbolSize: 1, label:{show: true, position:'top'}, data: totalList})
          // console.log("totalList", totalList)
        }
      
      this.chart.setOption({
        xAxis: {
          data: this.chartData.date || []
        },  
        series: seriesData
      });

数据：

this.chartData={
		"data":[
			{
				"createDate":"2023-07-18星期二",
				"live":278,
				"program":285,
				"review":278,
				"weekday":3
			},
			{
				"createDate":"2023-07-19星期三",
				"live":287,
				"program":294,
				"review":304,
				"weekday":4
			},
			{
				"createDate":"2023-07-20星期四",
				"live":268,
				"program":308,
				"review":297,
				"weekday":5
			},
			{
				"createDate":"2023-07-21星期五",
				"live":222,
				"program":198,
				"review":245,
				"weekday":6
			},
			{
				"createDate":"2023-07-22星期六",
				"live":139,
				"program":171,
				"review":171,
				"weekday":7
			},
			{
				"createDate":"2023-07-23星期天",
				"live":72,
				"program":80,
				"review":83,
				"weekday":1
			},
			{
				"createDate":"2023-07-24星期一",
				"live":0,
				"program":1,
				"review":0,
				"weekday":2
			}
		],
		"date":[
			"2023-07-18星期二",
			"2023-07-19星期三",
			"2023-07-20星期四",
			"2023-07-21星期五",
			"2023-07-22星期六",
			"2023-07-23星期天",
			"2023-07-24星期一"
		],
	}