eCharts知识点

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29326717/article/details/83038614

option = {
    title: { // 标题
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
    },
    tooltip: { // 气泡提示框
        trigger: 'item',
        formatter: '{a}<br/>{b}:{c}({d}%)'
    },
    legend: { // 图例
        orient: 'vertical',
        x: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    toolbox: { // 工具箱，辅助工具
        show: true,
        feature: { // 工具箱，自定义功能
            mark: { show: true },
            dataView: { show: true, readOnly: false }, // 数据视图
            magicType: { // 动态类型切换
                show: true,
                type: ['pie','funnel'],
                option: {
                    funnel:{
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore: { show: true },
            saveAsImage: { show: true },
        }
    },
    calculable: true,
    series: [ // 数据系列
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%','60%'],
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ]
        }
    ]
};

 

// 数据

series:[
    {
        name:'访问来源', // 系列名称，鼠标放在饼状图上时显示的字
        type:'pie', // 图表类型，pie-饼图，line-折线图，bar-柱状图，map-地图，...
        radius:'55%', // 半径长度
        center:['50%','60%'], // 饼状图圆心的位置
        data:[
            {value:335, name:'直接访问'},
            {value:315, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1548, name:'搜索引擎'},
        ]
    }
]

// 提示框，鼠标悬停交互时的信息提示

tooltip:{
    trigger:'item',
    formatter:"{a}<br/>{b}:{c}({d}%)"
}

tooltip:{
    show: true/false,
    zlevel: 1, // 一级层叠控制
    z: 8, // 二级层叠控制
    showContent: true/false, // tooltip主体内容显示策略
    trigger: 'item'/'axis', // 触发类型
    position: null, // 位置指定
    formatter: null,
    islandFormatter: '{a}<br/>{b}:{c}', // 拖拽重计算独有，饼图：a（序列名称）、b（数据项名称）、c（数值）、d（百分比）
    showDelay: 20, // 单位为ms
    hideDelay: 100, // 单位为ms
    transitionDuration: 0.4, // 动画变换时常，单位为s
    enterable: false/true, // 鼠标是否可进入详情旗袍气泡中
    backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色
    borderColor: '#333', // 提示边框颜色
    borderRadius: 4, // 提示边框圆角
    borderWidth: 0, // 提示边框宽度
    padding: 5, // 提示内边距
    axisPointer: {
        type:'line'/'cross'/'shadow'/'none'(无),
        lineStyle: { color: '#48b', width: 2, type: 'solid' }, // 直线指示器
        crossStyle: { color: '#1e90ff', width: 1, type: 'dashed' }, // 十字准星指示器
        shadowStyle: { color: 'rgba(150, 150, 150, 0.3)', width: 'auto', type: 'default' }, // 阴影指示器
    },
    textStyle: { color: '#fff' } // 文本样式
}

// 图例

legend: {
    show: true/false,
    zlevel: 0,
    z: 4,
    orient: 'horizontal'/'vertical', // 布局方式
    x: 'center'/'left'/'right'/{number}（x坐标，单位px）, // 水平放置位置
    y: 'top'/'bottom'/'center'/{number}（y坐标）, // 垂直放置位置
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',
    borderWidth: 0,
    padding: 5,
    itemGap: 10, // 各个item之间的间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14,
    textStyle: { color: '#333' },
    formatter: null,
    selectedMode: true/single/multiple, // 选中模式
    selected: null, // 配置默认选中状态
    data: [ // 如需个性化图例文字样式，可把数组项改为{ Object }，指定文件样式和个性化图例icon
        {
            name: { string },
            textStyle: { Object },
            icon: { string }
        }
    ],
    type: 组件类型
    isSelected: 图例开关相关
    getSelectedMap: 图例相关开关相关，获取当前的全部图例开关状态
    getColor: 图例颜色，获取传入的名称所对应的颜色
    setColor: 设置颜色
    setSelected: 选择状态
}

 

// 工具箱

toolbox{
    color: ['#1e90ff','#22bb22','#4b0082','#d2691e'], // 工具箱icon颜色序列，循环使用，同时支持在具体feature内制定color
    disableColor: '#ddd', // 禁用颜色定义
    effectiveColor: red, // 生效颜色
    showTitle: true, // 是否显示工具箱文字提示
    textStyle: {},
    feature: {
        mark:{ // 辅助线标志
            show: false,
            title: { mark: '辅助线开关', markUndo: '删除辅助线', markClear: '清空辅助线' },
            lineStyle: { width: 2, color: '#1e90ff', type: 'dashed' }
        },
        dataZoom:{ // 框选区域缩放
            show: false,
            title: { dataZoom: '区域缩放', dataZoomReset: '区域缩放后退' }
        },
        dataView:{ // 数据视图
            show: false,
            title: '数据视图',
            readOnly: false, // 默认数据视图为只读，false表打开编辑功能
            lang: ['数据视图', '开关', '刷新'],
        },
        magicType:{ // 动态类型切换
            show: false,
            title: { line: '折线图切换', bar: '柱状图切换', stack: '堆积', tiled: '平铺', force: '力导向布局图切换', chord: '和弦图且哈U呢', pie: '饼图切换', funned:'漏斗图切换'},
            option: {
                // line: { ... },
                // bar: { ... },
                // stack: { ... },
                // tiled: { ... },
                // force: { ... },
                // chord: { ... },
                // pie: { ... },
                // funned:'漏{ ... }
            },
            type: [],
        },
        restore: { show: false, title: '还原' }, // 还原
        saveAsImage: { show: false, title: '保存图片', type: 'pie', lang: ['点击保存'] } // 保存图片
    }
}

饼图

{
    center:['50%','50%'], // 圆心坐标
    radius: [0, '75%'], // 半径
    startAngle: 90, // 开始角度
    minAngle: 0, // 最小角度
    clockWise: true, // 显示是否顺时针
    roseType: null,
    selectedOffset: 10, // 选中的扇区偏移量
    selectedMode: null/single/multiple, // 选中模式
    legendHoverLink: true // 是否启用图例（legend）hover时的联动响应（高亮显示）
}

关于itemStyle

itemStyle: {
    normal: { ... }, // 默认样式
    emphasis: { ... }, // 强调样式（悬浮式样式）
}

color: { seriesIndex: x, series: xxx, dataIndex: y, data: yyy }
label: {
    show: true/false,
    position: 'outer','inner', // 饼图标签显示位置
    rolate: false,
    distance: 10,
    formatter: null,
    textStyle: ...
    x: ...
    y: ...
}

lableLine: {
    show: true/false, // 饼图标签视觉引导线显示策略
    length: 40, // 长度
    lineStyle: {} // 线条样式
}

{
    value: 1548,
    name: '搜索引擎',
    itemStyle: {
    normal:{
        color: ('red')
    },
    emphasis: {
        labelLine: {
            show: true,
            lineStyle: { color: 'red' },
        }
    }
}

文字样式

textStyle: {
    color: ...
    decoration: none, // 修饰，仅对tooltip、textStyle生效
    align: 'left'/'right'/'center', // 水平方向对齐
    baseline: 'top'/'bottom'/'middle', // 垂直方向对齐
    fontFamily: ... // 字体
    fontSize: 12, // 字号
    fontStyle: 'normal'/'italic'/'obliqua', // 样式
    fontWeight: 'normal'/'bold'/'bolder'/'lighter'/100/200/.../900 // 粗细
}

normal:{
    color: ('#000'),
    label: {
        textStyle: {
            fontSize: 30,
            fontFamily: '微软雅黑',
            fontWeight: 'bolder',
        }
    }
}

// 坐标轴有三种类型，类目型、数值型、时间型

axis:{
    type: 'category'/'value'/'time'/'log', // 坐标类型
    show: true/false,
    zlevel: 0,
    z: 0,
    position: 'bottom'/'left'/'top'/'right', // 坐标轴类型
    name: '', // 坐标轴名称
    nameLocation: 'end'/'start', // 坐标轴名称位置
    nameTextStyle: {},
    boundaryGap: true/false, // 类目起始和结束两端空白策略
    boundaryGap: [0,0], // 坐标轴两端空白策略
    min: null, // 指定最小值
    max: null,
    scale: false, // 脱离0值比例，放大聚焦到最终_min、_max区间
    splitNumber: null, 分分割段数
    logLabelBase: null, // axis.type === log时生效
    logPositive: null, // axis.type === log时生效
    axisLine: ... // 坐标轴线
    axisTick: ... // 坐标轴小标记
    axisLabel: ... // 坐标文本标签
    splitLine: ... // 分隔线
    splitArea: ... // 分隔区域
    data: [] // 类目列表
}