zoukankan      html  css  js  c++  java
  • ECharts series data 数组里面的元素,可以是对象

    修改自:https://echarts.apache.org/examples/zh/editor.html?c=line-stack

    注意:

    1. 对象里面value的值,用来显示在y轴上。
    option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis',
            formatter: p => {
                let returnStr = ''
                let len = p.length
                for (let i = 0; i< len; i++) {
                    returnStr += 'name:' + String(p[i].name) + 
                    ', value:' + String(p[i].value) + ' <br/>'
                }
                return returnStr
            }
        },
        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: '总量',
                data: [
                    {'name':'jeff','age':18,'value':18}, 
                    {'name':'jeff','age':18,'value':118}
                ]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                data: [
                    {'name':'jeff','age':18,'value':19}, 
                    {'name':'jeff','age':18,'value':219}
                ]
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                data: [
                    {'name':'jeff','age':18,'value':20}, 
                    {'name':'jeff','age':18,'value':320}
                ]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                data: [
                    {'name':'jeff','age':18,'value':21},
                    {'name':'jeff','age':18,'value':421}
                ]
            }
        ]
    };
    
  • 相关阅读:
    jmeter上做分布压测
    jpg,jpeg,bmp,png,gif图片格式区别
    jmeter的命令行进行压力测试
    Java8新特性
    02-Git
    01-Maven
    Java-集合
    Java-I/O框架
    mongodb安装配置
    Nginx常见错误及处理方法
  • 原文地址:https://www.cnblogs.com/cag2050/p/14049716.html
Copyright © 2011-2022 走看看