1 模块说明

image.png

2 配置

var option = {
    # 主题
    title: {
        # 文字内容
        text: 'ECharts 入门示例'，
        # 是否显示
        show: true,
        # 添加链接地址
        link: 'http://www.baidu.com',
        # 链接打开方式，支持self和blank，默认blank
        targer: 'self',
        # 上下左右边距为5
        padding: 5,
        # 上左边距为5，右下边距为0
        padding: [5,0,0,5]
        # 左边距
        left: 1,
        # 上边距
        top: 1,
        # 右边距
        right: 1,
        # 下边距
        bottom: 1,
        # 背景颜色，默认为transparent，即透明色
        backgroundColor: '#fff',
        # 图形层级
        z: 10,
        # 边框颜色
        borderColor: '#CCC',
        # 边框宽度
        borderWidth: 5,
        # 边框圆角半径
        borderRadius: 10,
        # 图形阴影大小
        shadowBlur: 5,
        # 图形阴影颜色
        shadowColor: '#CCC',
        # 图形阴影X轴长度
        shadowOffsetX: 5,
        # 图形阴影Y轴长度
        shadowOffsetY: 3,
        # 字体设置
        textStyle: {
            # 字体颜色
            color: '#fff',
            # 字体大小
            fontSize: 14,
            # 字体风格，支持normal/italic/oblique
            fontStyle: 'normal',
            # 字体粗细，支持normal/bold/bolder/lighter/100/200/400
            fontWeight: 'normal',
            # 字体系列
            fontFamily: '黑体',
            # 字体对齐格式，支持left/center/right
            align: 'center',
            # 行高
            lineHeight: 12,
        }
    },
    # 坐标轴里面图例文字
    tooltip: {
        # show默认为true
        show: true,
        # 组件触发类型，支持item/axis/none，默认item，item使用场景为饼状图，axis使用场景为柱状图。
        trigger: 'axis',
        # 显示值，默认为true
        showContent: true,
        # 当坐标轴不在聚焦时是否继续显示，默认为false，即不显示
        alwaysShowContent: false,
        # 延迟隐藏值的显示
        hideDelay: 1000,
        textStyle: {
            align: 'left',
        }
    }, 
    # 坐标轴图例主题
    legend: { 
        # 图例类型，支持plain和scroll，默认为plain，scroll为可滚动翻页的图例
        type: 'scroll',
        show: true,
        # 图例布局，支持horizontal和vertical，默认为horizontal水平布局
        orient: 'horizontal',
        # 图例宽度
        width: 300,
        # 图例长度
        height: 100,
        # 图例是否支持可选，支持true/false，以及single/multiple
        selectedMode: true,
        # 图例隐藏时颜色
        inactiveColor: '#CCC',
        # 图例各项间距
        itemGap: 5,
        # 图例每项宽度
        itemWidth: 10,
        # 图例每项高度
        itemHeight: 10
        data:['销量', '生产', '加工'],
        # 图例是否选中
        selected: {'销量': true, '生产': true, '加工': false}
    }, 
    # 坐标轴图例网格
    grid: {
        # show默认为false
        show: true,
        left: '3%',
        right: '4%',
        bottom: '3%',
        # 图形是否包含坐标轴，默认为false，false可能会显示不全
        containLabel: true
    },
    # x坐标轴指示器
    axisPointer {
        # show默认为fasle，当tooltip.trigger值为axis时默认设为true
        show: true,
        # x轴线类型，支持line/cross/shadow
        type: 'cross',
    },
    # x坐标轴
    xAxis: {
        # show默认为true
        show: true,
        # 数据类型，支持value/category/time/log，默认为category
        type : 'category',
        # 坐标轴名称
        name: '服饰类型',
        # 名称显示位置，支持start/middle/end
        nameLocation: 'start'
        # 名称字体
        nameTextStyle: {
            color: '#fff',
        }
        # 名称与坐标轴距离
        nameGap: 35,
        # 名称倾斜角度
        nameRotate: 30,
        # x轴最小值
        min: 0,
        # x轴最大值
        max: 100,
        # 坐标轴数据
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    }, 
    # y坐标轴
    yAxis: {
        # 是否强制包含0刻度，默认为true不强制
        scale: false,
        # 坐标轴分割数量，不包括起始值
        splitNumber: 5,
    }, 
    # 工具栏
    toolbox: {
        # 显示工具栏，默认为true
        show: true,
        # 工具栏布局，支持horizontal/vertical，默认horizontal
        orient: 'horizontal',
        # 工具栏图标各项大小
        itemSize: 15,
        # 工具栏图标各项间隔
        itemGap: 10,
        # 在鼠标移动到工具栏时显示工具栏的主题，默认true
        showTitle: true,
        # 工具栏
        feature: {
            # 启用保存图片工具
            saveAsImage: {
                # show默认为true
                show: true,
                # 保存的图片类型，支持png/jpeg，默认为png
                type: png,
                # 保存的文件名，默认以title的text为文件名
                name: "a",
                # 工具提示内容，默认值为保存为图片
                title: '保存为图片'
            },
            # 启用修改数据工具
            dataView: {
                # show默认为true
                show: true,
            },
            # 启用区域缩放工具
            dataZoom: {
                # show默认为true
                show: true,
            }
        }
    }
    series: [
        {
            # 画线名称
            name: '销量', 
            # 画线类型，支持line（线条），bar（柱形），pie（饼状），scatter（散点），effectScatter（涟漪），radar（雷达），boxplot（箱型），candlestick（K线），heatmap（热力图），map（地图），gauge（仪表盘），funnel（漏斗），lines（绘制线）
            type: 'bar', 
            # 坐标系列，支持cartesian2d（直角坐标系），polar（极坐标系）
            coordinateSystem: 'cartesian2d',
            # 标记符号，支持emptyCircle（空心，默认），'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: 'emptyCircle',
            # 标记符号大小，默认为4
            symbolSize: 8,
            # 标记符号倾斜度
            symbolRotate: 30,
            # 标记符号偏移x和y轴的值
            symbolOffset: [0, 10],
            # 是否显示标记符号，默认为true，如果为false只有在聚焦时显示
            showSymbol: true,
            # stack相同的图形值会叠加
            stack: 'a',
            # 是否梯形显示图形，默认为false
            step: false,
            # 是否显示图形动画，默认为true
            animation: true,
            # 图形动画持续时长，默认为1000，即1秒
            animationDuration: 2000,
            # 图形数据
            data: [5, 20, 36, 10, 10, 20],
            # 图形文本样式
            label: {
                show: true
            },
            # 图形填充样式
            areaStyle: {
                color: '#000',
            },
            # 图例样式
            itemStyle: {
            },
            # 图形线条样式
            lineStyle: {
            },
        }
    ] 
};

3 图例全选/反选

function echarts_select(obj, val) {
        var new_obj = echarts.init(document.getElementById(obj));
        var new_option = new_obj.getOption();
        var legend_data = new_option.legend[0].data
        var selected_data = {};

        for (var key in legend_data) {
            if (typeof(legend_data[key]) == "string") {
                selected_data[legend_data[key]] = val;
            }
            else {
                selected_data[legend_data[key].name] = val;
            }
        }
        
        new_option.legend[0].selected = selected_data;
        new_obj.setOption(new_option, true);
}

option = {
    toolbox: {
        itemSize: 32,
        itemGap: 15,
        feature: {
            myIco1: {
                show: true,
                title: '全选',
                icon: 'image:///static/images/selectall.png',
                onclick: function() {
                    echarts_select('mainDiv', true);
                },
            },
            myIco2: {
                show: true,
                title: '反选',
                icon: 'image:///static/images/selectnone.png',
                onclick: function() {
                    echarts_select('mainDiv', false);
                },
            },
        },
    },
}

4 series图形代码示例

4.1 line线条

{       
    name: 'a',
    type: 'line',
    coordinateSystem: 'cartesian2d',
    showSymbol: true,
    symbol: 'emptyCircle',
    symbolSize: 8,
    animation: true,
    animationDuration: 1000,
    areaStyle: {},
    data: [0.0, 4386.12, 0.0, 0.0, 0.0, 0.0, 163.2, 282.4, 5658.99, 7574.56, 8838.7, 3287.0],
};

4.2 bar饼状

{
    name: '2020-01月费用',
    type: 'pie',
    radius: ['30%', '61%'],
    center: ['45%', '45%'],
    data: [{'name': 'a', 'value': 1}, {'name': 'b', 'value': 2}, {'name': 'c', 'value': 3}],
    hoverOffset: 15,
    selectedMode: 'single',
    selectedOffset: 25,
    label: {
        normal: {
            show: true,
            formatter: "{b} : {c}元 ({d}%)",
            textStyle: {
                fontSize: 14,
            },
            position: 'outside'
        },
        emphasis: {
            show: true
        }
    },
    itemStyle: {
        emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}

5 参考文档

https://www.w3cschool.cn/echarts_tutorial/