echarts 折线图和柱状图叠加

其他 2021-01-30 14:26:59 阅读次数: 0

1，echarts画折线图，重叠折线图。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>第一个 ECharts 实例</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">

    function regionalMap() {
//渲染为svg(默认是canvas)
      var myChartFour = echarts.init(document.getElementById('main'),"",{renderer:"svg"});
      option = {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            },
          }
        },
        legend: {
          data: ['邮件营销', '搜索引擎', "广告植入"],
          x: 'left',
          //位置
          orient: 'vertical', // 'vertical'/horizontal     
          x: 'left', // 'center' | 'left' | {number},     
          y: 'center', // 'center' | 'bottom' | {number}   
        },
        color: ["#0080ff", "#4cd5ce"],
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {//调整折线图图线内容部分相对于父元素位置
          left: '18%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLine: {//不显示y轴
              show: false
            },
            axisTick: {//不显示y轴刻度线
              show: false
            },
            splitLine: {//不显示网格线
              show: false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {//不显示y轴
              show: false
            },
            axisTick: {//不显示y轴刻度线
              show: false
            },
            splitLine: {//不显示网格线
              show: false
            },
          }
        ],
        series: [

          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            symbol: "none",   //去掉折线上的小圆点
            itemStyle: {
              opacity: 0,
              normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: "red",  //背景渐变色 
                lineStyle: {        // 系列级个性化折线样式  
                  width: 3,
                  type: 'solid',
                  color: "white"
                }
              },
              emphasis: {
                color: '#4fd6d2',
                lineStyle: {        // 系列级个性化折线样式  
                  width: 2,
                  type: 'dotted',
                  color: "white" //折线的颜色
                }
              }
            },//线条样式  
            symbolSize: 5, //折线点的大小
            areaStyle: { normal: {} },
            data: [320, 332, 601, 134, 120, 230, 210]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            symbol: "none",   //去掉折线上的小圆点
            itemStyle: {
              normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: "blue", //背景渐变色    
                lineStyle: {        // 系列级个性化折线样式  
                  width: 3,
                  type: 'solid',
                  color: "white" //折线的颜色
                }
              },
              emphasis: {
                color: '#0180ff',
                lineStyle: {        // 系列级个性化折线样式  
                  width: 2,
                  type: 'dotted',
                  color: "white"
                }
              }
            },//线条样式
            symbolSize: 5, //折线点的大小
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          },
          {
            name: '广告植入',
            type: 'line',
            stack: '总量',
            symbol: "none",   //去掉折线上的小圆点
            itemStyle: {
              normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: "orange", //背景渐变色    
                lineStyle: {        // 系列级个性化折线样式  
                  width: 3,
                  type: 'solid',
                  color: "white" //折线的颜色
                }
              },
              emphasis: {
                color: '#0180ff',
                lineStyle: {        // 系列级个性化折线样式  
                  width: 2,
                  type: 'dotted',
                  color: "white"
                }
              }
            },//线条样式
            symbolSize: 5, //折线点的大小
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

      myChartFour.setOption(option);
    }
    regionalMap()
  </script>
</body>

</html>

借鉴自：https://blog.csdn.net/sx_lidan/article/details/81563116

option = {

    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            },
        }
    },
    legend: {
        data:['邮件营销','搜索引擎'],
        x: 'left'
    },
    color: ["#0080ff","#4cd5ce"],
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [

        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            itemStyle: {  
                normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: '#d7f4f8' // 0% 处的颜色
                        }, {
                            offset: 0.5, color: '#eefcfd' // 100% 处的颜色
                        }, {
                            offset: 1, color: '#fff' // 100% 处的颜色
                        }]
                    ),  //背景渐变色 
                    lineStyle: {        // 系列级个性化折线样式  
                        width: 3,  
                        type: 'solid',  
                         color: "#4fd6d2"
                    }
                },  
                emphasis: {  
                    color: '#4fd6d2',  
                    lineStyle: {        // 系列级个性化折线样式  
                        width:2,  
                        type: 'dotted',  
                        color: "#4fd6d2" //折线的颜色
                    }  
                }  
            },//线条样式  
            symbolSize:5, //折线点的大小
            areaStyle: {normal: {}},
            data:[320, 332, 601, 134, 120, 230, 210]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            itemStyle: {  
                normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: '#81befd' // 0% 处的颜色
                        }, {
                            offset: 0.4, color: '#e4f2ff' // 100% 处的颜色
                        }, {
                            offset: 1, color: '#fff' // 100% 处的颜色
                        }]
                    ), //背景渐变色    
                    lineStyle: {        // 系列级个性化折线样式  
                        width: 3,  
                        type: 'solid',  
                        color: "#0180ff" //折线的颜色
                    }  
                },  
                emphasis: {
                    color: '#0180ff',   
                    lineStyle: {        // 系列级个性化折线样式  
                        width: 2,  
                        type: 'dotted',  
                        color: "0180ff" 
                    }  
                }  
            },//线条样式
            symbolSize:5, //折线点的大小
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

2.echarts 柱状图叠加

未完待续。。。

参考自：https://www.cnblogs.com/xuwupiaomiao/p/11935548.html

app.title = '堆叠条形图';
 
option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
    },
     toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
         type: 'value'
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            smooth: true,
            label: {
                  normal: {
                      show: true,
                      position: 'insideTop',
                      formatter: function(v) {
                        return v.value || ""
                      }
                  }
              },
              
            data: [302, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
              smooth: true,
            label: {
                  normal: {
                      show: true,
                      position: 'insideTop',
                      formatter: function(v) {
                        return v.value || ""
                      }
                  }
              },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
              smooth: true,
            label: {
                  normal: {
                      show: true,
                      position: 'insideTop',
                      formatter: function(v) {
                        return v.value || ""
                      }
                  }
              },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
              smooth: true,
            label: {
                  normal: {
                      show: true,
                      position: 'insideTop',
                      formatter: function(v) {
                        return v.value || ""
                      }
                  }
              },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
              smooth: true,
            label: {
                  normal: {
                      show: true,
                      position: 'insideTop',
                      formatter: function(v) {
                        return v.value || ""
                      }
                  }
              },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        },
        {
            name: '总计',
            type: 'bar',
            stack: '总计',
            barGap: '-100%',
              smooth: true,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: { color: '#000' },
                    formatter: function(v) {
                        return "总计：" + (v.value)
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(128, 128, 128, 0)',
                    borderWidth: 1,
                    borderColor: '#1FBCD2'
                }
            },
            data: [1600,1600,1600,1600,1600,2600]
        }
    ]
};

猜你喜欢

转载自blog.csdn.net/Handsome2013/article/details/107374143
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022