zoukankan      html  css  js  c++  java
  • 堆叠区域图

    // 堆叠区域图
    <template>
    <div id="myChart3" :style="{ '100%', height: '500px'}">
    <!-- 使用并绘制简单表格(承载画布的div必须要定义大小width、height) -->
    </div>
     
    </template>
    <script>
    export default {
    name: "demo3",
    data() {
    return {};
    },
    //页面加载挂载完成的时候执行的函数
    mounted() {
    this.drawLine();//调用这个方法
    },
    methods: {
    drawLine() {
    //初始化这个实例,
    let myChart3 = this.$echarts.init(document.getElementById("myChart3"));

    myChart3.setOption({
    title: {
    text: "堆叠区域图"
    },
    tooltip: {
    trigger: "axis",//控制鼠标移入是否有提示信息
    axisPointer: {
    type: "cross",
    label: {
    backgroundColor: "#6a7985"
    }
    }
    },
    legend: {
    data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
    },
    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: "总量",
    areaStyle: {},
    data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
    name: "联盟广告",
    type: "line",
    stack: "总量",
    areaStyle: {},
    data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
    name: "视频广告",
    type: "line",
    stack: "总量",
    areaStyle: {},
    data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
    name: "直接访问",
    type: "line",
    stack: "总量",
    areaStyle: { normal: {} },
    data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
    name: "搜索引擎",
    type: "line",
    stack: "总量",
    label: {
    normal: {
    show: true,
    position: "top"
    }
    },
    areaStyle: { normal: {} },
    data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
    ]
    });
    }
    }
    };
    </script>

     
     
     

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    ZOJ2402 Lenny's Lucky Lotto List 简单DP
    HDU1024 最大M子段和问题 (单调队列优化)
    HDU2048 HDU2049 组合数系列 错排
    HDU1081 最大字段和 压缩数组(单调队列优化)
    HDU1166 数状数组
    HDU1085 多重背包
    HDU3062
    递归 递推 规律
    【机器学习PAI实战】—— 玩转人工智能之美食推荐
    阿里开源自用 OpenJDK 版本,Java 社区迎来中国力量
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11346023.html
Copyright © 2011-2022 走看看