echarts(二) 常用配置项及组件（标题，提示框，图例，工具栏，坐标轴，系列，标记点（线））

入门篇

• echarts数据可视化交互的基本需求是：总览为先，缩放过滤按需查看细节。
• 基本配置项需要在option配置。

标题 title

• 主标题 text
• 副标题 subtext
• 位置 left
  • left 左对齐
  • right 右对齐
  • center 居中
• 主标题样式 textStyle
  • color
  • fontSize
• 副标题样式 subtextStyle
  • color
  • fontSize
• 可见性 show
  • true 可见，默认
  • false 不可见

title:{
    text:'主标题',
    subtext: '副标题',
    left:'center',
    textStyle:{
        color:'maroon',
        fontSize:24
    },
    subtextStyle:{
        color:'orange',
        fontSize:18
    },
    // show:false,
    show:true,
},

提示框 tooltip

• 提示框触发方式 trigger：
  • item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。
  • axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
  • none 什么都不触发

tooltip:{
    // trigger:'item',
    trigger:'axis',
    // trigger:'none',
},

图例legend

• 图例legend 可以对不同系列的数据做标注和过滤，它需要与series 搭配使用。
• data[] 图例的数据,每一项代表一个系列的 name。

legend:{
    left:'left'
},

工具栏 toolbox

• feature{} 工具配置项
  • 保存图片 saveAsImage
  • 配置项还原 restore
  • 数据视图工具 dataView
  • 数据区域缩放 dataZoom
  • 动态类型切换 magicType
    • type[] 动态类型
      • line 折线图
      • bar 柱状图
      • stack 堆叠

toolbox:{
    feature:{
        saveAsImage:{type:'jpeg'},
        dataView:{},
        restore:{},
        dataZoom:{},
        magicType:{
            type:['line','bar','stack']
        }
    }
},

坐标轴 xAxis

• name 坐标轴名称
• data 类目数据

xAxis:{
    name:'前端语言',
    data:['html','css','js'],
},

坐标轴 yAxis

• name 坐标轴名称
• splitNumber 分割段数
• nterval 强制设置坐标轴分割间隔
• minInterval 坐标轴最小间隔
• maxInterval 坐标轴最大间隔

yAxis:{
    name:'人数',
    // splitNumber:10,
    // interval:'10',
    // minInterval:20,
    // maxInterval:5
},

系列列表 series

• 列表类型 type
• 系列名 name ：用于提示tooltip，图例legend 筛选，数据更新
• 数据 data
• 标记点 markPoint
  • data [] 标记的数据数组
  • {type:‘max’} 最大值
  • {type:‘min’} 最小值
  • {type:‘average’} 平均值
  • coord [x,y] 坐标位
  • symbolOffset 标记偏移
  • symbolSize 标记大小
  • value 最定制标记内容
  • symbol 标记图形包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ ,url
• 标记线 markLine
  • data[] 标记数据
  • name 名称
  • type 类型 ‘average’, ‘min’, ‘max’
  • coord [x,y] 坐标位

series:[
    {
        name:'学习人数',
        type:'bar',
        data:[30,20,40],
        markPoint:{
            data:[
                {type:'max'},
                {type:'min'},
                {
                    value:'kkb',
                    coord:[1,40],
                    itemStyle:{
                        color:'maroon'
                    }
                }
            ],
            itemStyle:{
                color:'#00acec'
            },
        }
    },
    {
        name:'就业人数',
        type:'bar',
        data:[40,30,50],
        markLine:{
            data:[
                {type:'average'},
                {type:'max'},
                {type:'min'},
                [
                    {coord:[0,0]},
                    {coord:[2,50]},
                ]
            ],
            itemStyle:{
                color:'#00acec'
            }
        }

    }
]

效果图