echars 合并两个数据的表格

在路上等

于 2024-03-15 14:34:43 发布

阅读量435

点赞数 6

分类专栏： echars 文章标签：开发语言前端

本文链接：https://blog.csdn.net/weixin_42327537/article/details/136739172

版权

echars 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

   const chartDom = document.getElementById('mainOne');
        const myChart = echarts.init(chartDom);
        let option;
        option = {
          dataset: {
            source: [
              ['type', '2012', '2013', '2014', '2015', '2016'],
              ['今日变更数', 320, 32, 301, 334, 390],
              ['今日工单数', 220, 182, 191, 234, 290],
              ['前端故障数', 320, 32, 301, 334, 390],
              ['今日告警数', 220, 182, 191, 234, 290],
            ]
          },
          grid: {
            top: "15%",
            bottom:"15%"
          },
          legend: {
            orient: 'horizontal',
            right: 'left',
            itemWidth: 10,
            itemHeight: 10          },
          xAxis: { // 控制x轴
            type: 'category',
            axisTick: {
              show: true
            },
            show: true
          },
          tooltip:{  //控制提示信息
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          yAxis: {},
          series: [
            {
                name: '未完成',
                type: 'bar',
                stack: '广告',
                itemStyle: {
                    normal: {
                        color: '#00ACF7',
                        // barBorderRadius: [10, 10, 0, 0], //依次表示 左上，右上，右下、左下
                        label: {
                            show: false, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: '#aaa',
                                fontSize: 14
                            }
                        }
                    }
                },
            },
            {
                name: '已完成',
                type: 'bar',
                barWidth:'30%',
                stack: '广告',
                itemStyle: {
                    normal: {
                        color: '#00F766',
                        // barBorderRadius: [10, 10, 0, 0], //依次表示 左上，右上，右下、左下
                        label: {
                            show: false, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: '#aaa',
                                fontSize: 14
                            }
                        }
                    }
                },
            },
           
        ]

        };
        option && myChart.setOption(option);