孙肖宁

Echarts的基本属性
标题titletitle: { show:true, //是否显示 text: '...
扫描右侧二维码阅读全文
02
2019/10

Echarts的基本属性

  • 标题title
title: {
        show:true, //是否显示
        text: 'ECharts 入门示例', //标题文字
        subtext:'学习ECharts就来慕课网', // 附标题
        left:'right', // 数字就是像素值 ,也可以是 center left right这种位置值
        borderColor:'red', //标题的边框颜色
        borderWidth:5, //标题边框宽度
        textStyle:{ //标题字体样式
            fontSize:40
        }
    },
  • 工具箱toolbox
toolbox: {
        show: true,
        feature: {
            dataView:{ //数据内容
                show:true
            },
            restore:{ //数据还原
                show:true
            },
            dataZoom:{ //选中区域
                show:true
            },
            saveAsImage: { //取消选中区域
                show: true
            },
            magicType: { //切换图
                type: ['line', 'bar']
            }
        }
    },
  • 弹窗组件tooltip
tooltip: {
        trigger: 'axis'
    },
  • 标记线、标记点
series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        markPoint: { // 标记点
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值',symbol:'arrow'}
            ]
        },
        markLine: { // 标记线
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }]
  • 缩放
    dataZoom: [{
        type: 'slider',
        start: 10,
        end: 40
    }],
Last modification:October 2nd, 2019 at 10:56 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment