echarts图形开发常用参数集合

echarts图形开发常用参数集合

本文档提供展示当前较为常用参数，具体配置请参照 echarts官网

0. 公共配置项

配置项中有很多公共配置项，如文字，容器，线样式等，该模块将该配置项提出，后续不再重复写入

0.1 字体样式

{
    color: '#0000FF', // 字体颜色
    fontStyle: 'normal', // 字体类型
    fontWeight: 'bold', // 字体粗细
    fontFamily: 'sans-serif', // 字体风格
    fontSize: '40', // 字体大小
    width: 20, // 字体宽度
    height: 20, // 字体高度
    lineHeight: 50, // title显示行高
    textBorderColor: '#8A2BE2', // 文本边框颜色
    textBorderWidth: 2, // 文本边框宽度
    textBorderType: 'solid', // 文本边框显示类型
    textShadowColor: '#FF7F50', // 阴影颜色
    textShadowBlur: 5, // 阴影宽度
    textShadowOffsetX: 5, // 阴影偏移x轴
    textShadowOffsetY: 5, // 阴影偏移y轴
}

0.2 容器样式

{
    backgroundColor: '#FF8C00', // 背景颜色
    borderColor: '#FF1493', // 边框颜色
    borderWidth: 5, // 边框宽度
    borderRadius: 10, // 边框圆角
    shadowBlur: 10, // 图形阴影的模糊大小
    shadowColor: '#000', // 阴影颜色
    shadowOffsetX: 10, // 阴影水平方向上的偏移距离
    shadowOffsetY: 10, // 阴影垂直方向上的偏移距离
}

0.3 线样式

{
    color: '#ccc', // 线颜色
    width: 1, // 线宽
    type: 'solid', // 线类型
    dashOffset: 5, // 线偏移量
    opacity: 0.5, // 线透明度
}

0.4 图形文本配置

{
    show: true, // 是否显示
    position: 'top', // 显示位置
    distance: 5, // 距离
    formatter: '{b}: {@score}', // 显示格式
    // 以下省略标签文字样式配置，配置项见公共配置项-字体样式
    color: '#48D1CC', // 文字样式
}

1. 标题配置项(title)

标题当前可配置项有三大项：主标题、副标题、标题整体框架，具体配置项可见下列代码

效果可访问 示例 将下列代码复制到编辑内可见

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    title: {
        text: 'test\n换行', // 主标题显示文本
        show: true, // 是否显示标题
        // 主标题样式设置，配置项见公共配置项-字体样式
        textStyle: {
            overflow: 'none', // 文本超出显示方式
            ellipsis: '...', // 超出文本显示
            lineOverflow: 'truncate', // 文本超出高度时是否截断
        },
        subtext: '副文本标题', // 副文本标题
        // 副标题与标题样式配置项基本相同，配置项见公共配置项-字体样式
        subtextStyle: {
            
        },
        textAlign: 'left', // 文本水平对齐方式
        textVerticalAlign: 'auto', // 文本垂直对齐方式
        triggerEvent: true, // 是否触发事件
        padding: 20, //标题内边距
        itemGap: 30, // 主副标题差距
        left: 20, // title左侧边距，可使用方位字符串
        top: 20, // title上侧边距，可使用方位字符串
        right: 20, // title右侧边距，可使用方位字符串
        bottom: 20, //title下侧边距，可使用方位字符串
        // 以下为容器样式，配置项见公共配置项-容器样式
        backgroundColor: '#FF8C00', // 标题背景颜色
        borderColor: '#FF1493', // 标题边框颜色
        borderWidth: 5, // 标题边框宽度
        borderRadius: 10, // 标题边框圆角
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

2. 图例显示项(legend)

图表显示项一般为多类型数据显示，legend 起到配置图例显示项作用

var data = genData(50);

option = {
    title: {
        text: '同名数量统计',
        subtext: '纯属虚构',
        left: 'right',
        top: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b} : {c} ({d}%)'
    },
    legend: {
        show: true, // 是否显示
        type: 'scroll', // 图例类型，滚动或者全部显示
        scrollDataIndex: 5, // 初始时，滚动定位位置（类型为滚动才有效）
        pageButtonItemGap: 10, // 页码和翻页按钮之间的距离
        pageButtonGap: 10, // 图例与控制块距离
        pageButtonPosition: 'end', //控制块相对图例位置
        pageFormatter: '{current}/{total}', // 翻页信息显示格式
        left: 10, // 图例左侧边距
        top: 10, // 图例上侧边距
        right: 10, // 图例右侧边距
        bottom: 10, // 图例上侧边距
        width: 900, // 图例宽度
        height: 100, // 图例高度
        orient: 'horizontal', // 布局朝向
        align: 'right', // 图例标记与文本对齐方式
        padding: [5, 10, 10, 10], // 整体图例内边距
        itemGap: 5, // 每项图例之间间隔
        itemWidth: 15, // 图表标记图形宽度（颜色块）
        itemHeight: 15, // 图表标记图形高度（颜色块）
        // 图例图形样式配置
        itemStyle: {
            borderColor: '#FFD700', // 图例图形边框颜色
            borderWidth: 2, // 图例图形边框宽度
            borderType: 'dotted', // 图例图形边框描边类型
            opacity: 0.5, // 图例图形透明度
        },
        // 图例图形线样式（本配置项只适用于折线图）
        lineStyle: {
            width: 10, // 线宽
        },
        formatter: '姓名：{name}', // 图例文字项显示格式
        selectedMode: 'multiple', // 控制单击图例是否控制该项在图表中显示隐藏
        inactiveColor: '#fff', // 图例关闭时的字体与图例颜色
        selected: { '测试姓名1s': false }, // 设置图例是否开启关闭，未设置默认开启
        // 图例文本显示样式，配置项见公共配置项-字体样式
        textStyle: {
            color: 'inherit', // 文本颜色，inherit显示该项数据颜色
        },
        // tooltip显示
        tooltip: {
            show: true
        },
        // 以下为容器样式，配置项见公共配置项-容器样式
        backgroundColor: '#000', // 图例模块背景颜色
        // 图例页信息的文字样式，配置项见公共配置项-字体样式
        pageTextStyle:  {
            
        },
        // 环形图使用，环形图内部文字，配置项见公共配置项-字体样式
        emphasis: {
            selectorLabel: {
                show: true   
            }
        },
        selector: true, // 全选反选按钮开关
        // 全选反选文本样式，配置项见公共配置项-字体样式
        selectorLabel: {
            
        },
        selectorPosition: 'start', // 选择器（全选反选）位置
        selectorItemGap: 10, // 选择器（全选反选）按钮距离
        selectorButtonGap: 10, // 选择器（全选反选）与图例距离
        data: data.legendData
    },
    series: [
        {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: data.seriesData,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};




function genData(count) {
    var nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
    ];
    var legendData = [];
    var seriesData = [];
    for (var i = 0; i < count; i++) {
        var name = Math.random() > 0.65
            ? makeWord(4, 1) + '·' + makeWord(3, 0)
            : makeWord(2, 1);
        legendData.push(name);
        seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
        });
    }legendData.push('测试姓名1s');
    seriesData.push({name: '测试姓名1s', value: Math.round(Math.random() * 100000)});
    

    return {
        legendData: legendData,
        seriesData: seriesData
    };

    function makeWord(max, min) {
        var nameLen = Math.ceil(Math.random() * max + min);
        var name = [];
        for (var i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
        }
        return name.join('');
    }
}

3. 网格(grid)

本块内容配置项主要负责折线图、柱状图、散点图等网格图参数配置

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        // trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        show: true, // 显示直角坐标系网格
        left: '3%', // 左侧边距
        right: '4%', // 右侧边距
        bottom: '3%', // 下侧边距
        top: '10%', // 上侧边距
        width: 'auto', // 网格宽度
        height: 'auto', // 网格高度
        containLabel: true, //是否包含刻度标签，此项数字过千后关闭似乎有问题，不要随意关闭
        backgroundColor: '#FDF5E6', // 网格背景颜色
        borderColor: '#000', // 网格四周边框颜色
        borderWidth: 5, // 网格边框线宽
        tooltip: {
            show: true, // 是否显示提示框
            // trigger: 'axis', // 触发类型
            // 坐标轴指示器配置项，能够指示坐标轴当前刻度工具，
            // 该项配置项能够实现对大数据概况和详细查看，也能实现对复杂数据辅助查看
            axisPointer: {
                type: 'line', // 指示器类型
                axis: 'x', // 指示器坐标轴，如x轴，则x轴出现虚拟辅助线
                snap: true, // 是否吸附到点上
            },
            position: [80, 90], // 提示框浮层的位置，该项触发前提是trigger不能为axis
            formatter: '{a}: {b}
{c}', // 提示框浮层内容格式，参数代表数据请自行查看文档
            backgroundColor: '#6B8E23', // tooltip背景颜色
        },
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

4. 坐标系X,Y轴(xAxis、yAxis)

本配置项主要负责直角坐标系的 x 轴配置，一般情况组件最多只能防两个 x 轴，多个x 轴需要配置 offset 偏移防止多个 x 轴重叠

在本节内容前，需要了解一些专用名称：

• 类目轴：类目轴数据点基本为无序的数据，由数组传入，例如 ['类A', '类B', '类C']
• 非类目轴：非类目轴数据点为有序的数据，例如时间，有序数值等
• 次刻度线：非类目轴每个数据点等距划分，每个划分点形成虚线标识更小的数据间隔，详见实例

option = {
    xAxis: {
        show: true, // x轴内容是否显示
        position: 'top', // x轴内容显示位置，只能是上下
        offset: 10, // x轴上下偏移值，主要分开多个x轴
        realtimeSort: true, // 实时排序，该配置项需要配合多个配置项才能有效果，详见文档
        sortSeriesIndex: 0, // 用于排序列的系列id
        type: 'category', // 坐标轴类型，详见文档
        name: 'x轴', // 坐标轴名称，设置后将会在尾部添加名称
        nameLocation: 'start', // 坐标轴名称相对轴显示位置
        // 坐标轴名称样式，配置项见公共配置项-字体样式
        nameTextStyle: {
        },
        nameGap: 20, // 坐标轴名称与坐标轴距离
        nameRotate: 30, // 坐标轴名称旋转角度
        inverse: true, // 是否反向（左右）坐标轴，反向时数据也将相反显示
        boundaryGap: false, // 坐标轴两边留白策略，开启时，x轴显示项将会显示在中间
        min: 1, // 刻度最小值，如为类目轴，则该数据代表数组序号
        max: 5, // 刻度最大值，如为类目轴，则该数据代表数组序号
        scale: true, // 是否脱离0值比例，此项设置最大最小值后会无效
        splitNumber: 2, // 坐标轴分割段数，类目轴无效
        minInterval: 1, // 自动计算坐标轴最小间隔大小，类目轴无效
        maxInterval: 2, // 自动计算坐标轴最大间隔大小，类目轴无效
        interval: 2, // 强制设置坐标轴分割间隔
        silent: true, // 坐标轴是否静态不可交互，关闭时鼠标时间等交互都将关闭
        triggerEvent: true, // 坐标轴的标签是否响应和触发鼠标事件
        // 坐标轴轴线（不包含刻度名称，但包含轴名称）相关设置
        axisLine: {
            show: true, // 轴线是否显示
            onZero: false, // xy轴是否共用一个0值，如设置x轴position需要关闭掉这个
        },
        // 刻度线设置
        axisTick: {
            show: true, // 是否显示刻度线
            alignWithLabel: true, // 刻度与标签是否对齐，此项需要boundaryGap开启才有效果
            interval: 0, // 刻度间隔，类目轴有效，如1则隔一个有刻度线
            inside: true, // 刻度线是否朝内部显示
            length: 10, // 坐标轴刻度线长度
            // 刻度线样式，配置项见公共配置项-线样式
            lineStyle: {
            }
        },
        // 次刻度线配置，该配置项类目轴无法使用
        minorTick: {
            show: true, // 是否显示次刻度线
            splitNumber: 10, // 每两个刻度线间分割数量
        },
        // 刻度线标签配置
        axisLabel: {
            show: true, // 是否显示刻度线标签
            interval: 0, // 标签显示间隔，如1则隔一个有标签
            inside: true, // 标签刻度是否朝内
            margin: 20, // 标签与刻度线之间的距离
            formatter: '{value}星期', // 标签显示格式
            // 以下省略标签文字样式配置，配置项见公共配置项-字体样式
            color: '#00BFFF', // 标签颜色
        },
        // 刻度线在grid的分割线
        splitLine: {
            show: true, // 是否显示分割线
            interval: 1, // 分割线显示间隔
            // 分割线样式，配置项见公共配置项-线样式
            lineStyle: {
            }
        },
        // 次刻度线的分割线配置
        minorSplitLine: {
            show: false, // 是否显示次刻度线的分割线
            // 次刻度线的分割线样式，配置项见公共配置项-线样式
            lineStyle: {
            }
        },
        // 刻度线在网格中分割的区域配置，分割区域主要视觉上区分相邻刻度块，与斑马线相同
        splitArea: {
            show: true, // 是否显示分割区域
            interval: 0, // 显示间隔
            // 区域显示样式
            areaStyle: {
                color: ['#90EE90', '#ffffff'], // 区域显示颜色
                opacity: 0.5, // 区域颜色透明度
            }
        },
        // 坐标轴指示器配置项,鼠标移入网格某个区域后显示该标签值
        axisPointer: {
          show: true, // 是否显示
          type: 'shadow', // 指示器类型，线型或者阴影
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

5. 提示框组件(tooltip)

本配置项主要负责提示框相关配置项配置，本配置项可设置在多种地方

• 可以设置在全局，即 tooltip
• 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
• 可以设置在系列中，即 series.tooltip
• 可以设置在系列的每个数据项中，即 series.data.tooltip

声明处影响生效范围

本节需要了解的专用名称：

• 坐标轴指示器：鼠标放入网格中，坐标轴提示当前坐标位置显示

option = {
    title: {
        text: '一天用电量分布',
        subtext: '纯属虚构'
    },
    tooltip: {
        show: true, // 是否显示提示框
        trigger: 'axis', // 触发类型，图形触发或者坐标轴触发
        // 坐标轴指示器配置项,
        axisPointer: {
            show: true, // 是否显示指示器
            type: 'cross', // 指示器类型
            // 坐标指示器文本标签
            label: {
                show: true, // 是否显示文本
                precision: 3, // 文本标签中数值的小数点精度，对非类目且为数字有效
                formatter: '当前时间：{value}', // 指示器文本显示格式
                margin: 20, // 文本与轴线距离
                // 以下为指示器文本样式属性，配置项见公共配置项-字体样式
            },
            // 指示器类型为line时可配置，主要配置线样式，配置项见公共配置项-线样式
            lineStyle: {
            },
            // 指示器类型为shadow时可配置，主要配置阴影样式
            shadowStyle: {
              color: '#87CEFA', // shadow颜色
              opacity: 0.5, // shadow透明度
            },
            // 类型为cross时，可配置，主要配置交叉线样式，配置项见公共配置项-线样式
            crossStyle: {
            },
            animation: true, // 是否开启动画
            animationThreshold: 1000, // 开启动画的阈值，图形数量低于该数量开启，否则关闭
        },
        showContent: true, // 是否显示浮框层
        alwaysShowContent: true, // 移出是是否显示提示框
        triggerOn: 'mousemove|click', // 提示框触发的条件
        enterable: true, // 鼠标是否可进入tooltip
        confine: true, // 适配窄屏幕，tooltip超出是否隐藏
        className: 'test-class', // 指定tooltip的css类
        position: [10, 10], // 浮框位置
        formatter: '时间：{b}
{a}: {c}W', // 浮框内容显示格式
        backgroundColor: '#FDF5E6', // 浮框背景颜色
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} W'
        },
        axisPointer: {
            snap: true
        }
    },
    visualMap: {
        show: false,
        dimension: 0,
        pieces: [{
            lte: 6,
            color: 'green'
        }, {
            gt: 6,
            lte: 8,
            color: 'red'
        }, {
            gt: 8,
            lte: 14,
            color: 'green'
        }, {
            gt: 14,
            lte: 17,
            color: 'red'
        }, {
            gt: 17,
            color: 'green'
        }]
    },
    series: [
        {
            name: '用电量',
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
                itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                },
                data: [ [{
                    name: '早高峰',
                    xAxis: '07:30'
                }, {
                    xAxis: '10:00'
                }], [{
                    name: '晚高峰',
                    xAxis: '17:30'
                }, {
                    xAxis: '21:15'
                }] ]
            }
        }
    ]
};

6. 视图工具栏(toolbox)

本配置项主要负责视图工具（导出图片、数据视图、动态类型切换、数据区域缩放、重置）配置

option = {
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['最高气温', '最低气温']
    },
    toolbox: {
        show: true, // 是否显示工具栏组件
        orient: 'horizontal' ,// 工具布局朝向
        itemSize: 20, // 工具icon大小
        itemGap: 15, // 工具之间间隔
        showTitle: true, // 鼠标移入是否显示标题
        // 各工具配置项
        feature: {
            // 保存为图片工具
            saveAsImage: {
                type: 'jpg', // 保存格式
                name: '气温变化表', // 保存文件名称
                backgroundColor: '#EEE8AA', // 导出表格背景颜色
                show: true, // 是否显示该工具
                title: '导出为图片', // 鼠标移入显示提示
            },
            // 配置项还原（刷新按钮）
            restore: {
                show: true, // 是否显示刷新按钮
                title: '刷新', // 提示文本
            },
            // 数据视图切换
            dataView: {
                show: true, // 是否显示
                readOnly: false, // 是否只读
                title: '切换视图', // 提示文本
            },
            // 数据区域缩放
            dataZoom: {
                show: true, // 是否显示
                title: {
                    zoom: '放大',
                    back: '还原'
                }, // 提示文本
                xAxisIndex: [0, 3], // 可操作x轴
                yAxisIndex: 'none', // 可操作y轴
            },
            // 动态切换类型
            magicType: {
                show: true, // 是否显示
                type: ['line', 'bar', 'stack'], // 显示类型集合
            }
        }
        
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name: '最高气温',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '最低气温',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            position: 'start',
                            formatter: '最大值'
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]
};

7. 所有类型视图常见配置项

本节内容主要负责展示部分视图的常见配置项

7.1 折线图

折线图主要负责展现数据变化的趋势

需要了解专用名称：

• 引导线：鼠标放置在节点上时显示文本，引导线连接节点与文本之前，起到引导作用

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320, 1111],
        type: 'line', // 图类型
        clip: true, // 是否裁剪超出项
        smooth: true,
        // 设置线条样式，配置项见公共配置项-线样式
        lineStyle: {
            color: '#4169E1',
        },
        // 区域填充样式，只要该项声明出来图形将会变成区域面积图
        areaStyle: {
            color: '#87CEEB', // 区域颜色
            origin: 'start', // 图形区域起始位置
            opacity: 0.5, // 透明度
        },
        // 折线图高亮状态及文本配置
        emphasis: {
            focus: 'series', // 鼠标放入折线上是否聚焦
            // 节点标签文本配置项
            label: {
                show: true, // 是否显示标签文本
                position: 'top', // 标签与图形元素相对位置
                distance: 10, // 标签与图形元素距离
                formatter: '当前值：{c}', // 标签显示格式
                // 以下省略标签文字样式配置，配置项见公共配置项-字体样式
            },
            // 视觉引导线配置
            labelLine: {
                show: true, // 是否显示
                lineStyle: {
                    width: 5
                }
            }
        }
    }]
};

7.2 柱状图

柱状图通过柱形高度展示数据大小

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            // 系列名称，用于tooltip显示
            name: '直接访问',
            type: 'bar',
            showBackground: true, // 是否显示柱条的背景色
            backgroundStyle: {
                'Mon': '#F5F5F5',
                'Tue': '#F5F5F5',
                'Wed': '#F5F5F5',
                'Thu': '#F5F5F5',
                'Fri': '#F5F5F5',
                'Sat': '#F5F5F5',
                'Sun': '#F5F5F5'
            }, // 柱条背景色
            // 柱条显示文本
            label: {
                show: true, // 是否显示
                position: 'top', // 显示位置
                distance: 5, // 距离
                formatter: '{b}: {@score}', // 显示格式
                // 以下省略标签文字样式配置，配置项见公共配置项-字体样式
                color: '#48D1CC', // 文字样式
            },
            // 柱条图形样式
            itemStyle: {
                color: '#48D1CC', // 颜色
                opacity: 0.8, // 透明度
            },
            
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

7.3 饼图

饼图主要用于表现不同类目的数据在总和中的占比

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源', // 系列名称，用于tooltip的显示
            type: 'pie',
            radius: '50%', // 饼图半径
            roseType: true, // 是否展示成南丁格尔图
            stillShowZeroSum: false,// 数据为0的时候是否显示扇区
            avoidLabelOverlap: true, // 防止标签重叠
            // 文本标签配置项（包含文本样式），配置项见公共配置项-图形文本配置
            label: {
            },
            // 引导线配置
            labelLine: {
                show: true, // 是否显示
                length: 10, // 第一段引导线长度
                length2: 15, // 第二段引导线长度
                smooth: true, // 平滑引导线
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'},
                {value: 0, name: '无数据'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};