测试用的地址 echarts网站   https://echarts.baidu.com/examples/editor.html?c=area-basic

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            smooth:false,   //关键点,为true是不支持虚线的,实线就用true
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:2,
                        type:'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },            
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            smooth:false,   //关键点,为true是不支持虚线的,实线就用true
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:2,
                        type:'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },            
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
    ]
};

echarts 折线变成虚线相关推荐

  1. Echarts折线图虚线实线合并

    配置: option = {xAxis: {},yAxis: {},series: [{// 每个点得横纵坐标data: [[1, 1],[2, 2],[3, 3]],type: 'line',col ...

  2. echarts折线图实线与虚线拼接及提示框浮层内容格式的设置

    echarts折线图实线与虚线拼接及提示框浮层内容格式的设置 想要实现实线与虚线的结合,后端返回的数据是动态的,根据状态的不同展示实线与虚线. 例子1: 数据是固定的 series: [{name:' ...

  3. echarts折线图实线加虚线

    请将如下代码粘贴至echarts官网测试环境测试:http://echarts.baidu.com/examples/editor.html?c=line-simple option = {title ...

  4. echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  5. Echarts折线图属性设置大全

    Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...

  6. Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程

    本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...

  7. 1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字),手把手教程系列

    一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...

  8. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  9. echarts折线图默认显示最后一个点的数据

    echarts折线图默认显示最后一个点的数据 想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...

最新文章

  1. Apache Tomcat 7.x 概述
  2. 【重磅】马斯克遇终极麻烦:被起诉欺诈罪 或丢掉CEO职位 特斯拉暴跌约13%
  3. R语言数据可视化 ggplot2基础3 添加几何对象
  4. OpenCV中VideoWriter输出视频文件为空或6KB解决方法(java)
  5. oracle asm和文件系统,Oracle工具之--ASM与文件系统及跨网络传输文件
  6. RobotFramework自动化框架—数据驱动测试
  7. 【LeetCode笔记】399. 除法求值(Java、图)
  8. 我是程序员,我有对象,我还可以调用别人对象!
  9. RTX——第10章 任务调度-抢占式、时间片和合作式
  10. 龙果学院Elasticsearch顶尖高手系列-高手进阶篇完整版
  11. 写c++好的软件_族谱家谱制作怎么写?专业的家谱族谱编辑制作软件哪个好
  12. 哪里可以在线观看《人再囧途之泰囧》
  13. 交换机VLANIF配置
  14. 京东商品详情接口,京东详情页接口,宝贝详情页接口,商品属性接口,商品信息查询,商品详细信息接口,h5详情,京东APP详情,京东api接口,京东历史价格数据接口代码对接分享
  15. 小武学fpgastep5
  16. 2021年全球与中国颅骨稳定系统行业市场规模及发展前景分析
  17. 实战引流技巧,教你如何做好运营
  18. 服务器看门狗芯片电路图,看门狗电路图_看门狗电路作用_看门狗电路的工作原理-与非网...
  19. 性能领域:你知道的越多,不知道的也就越多
  20. 奇迹单机版服务器修改器,奇迹单机版送无限特权-奇迹单机版钻石修改器手游预约_第一手游网...

热门文章

  1. 绘制渐变色扇形图 -基于python - matplotlib 颜色地图plt.cm模块儿
  2. 北京申请界线与不动产测绘乙级资质要求
  3. 前端面试高频精讲(二)Vue篇
  4. 国家重点实验室分布转
  5. 我会背锅,能去做运维吗?
  6. jQuery农历黄历日期表
  7. 定积分应用解题方法归纳
  8. GIBXChange上线MT5交易平台:MT5 LP MAM+5A对冲模式强势来袭
  9. 杰里之获取发射器蓝牙连接状态函数【篇】
  10. 要拒绝无意义的游戏行为