Echarts 结构

常用简单结构

1、总体常用内容

// 获取dom元素，初始化echarts实例
let myChart = echarts.init(document.getElementById('demo'));
// 图表的配置项和数据
let option {
    legend: {}, // 图例
    toolbox: {}, // 工具栏
    tooltip: {}, // 提示框
    grid: [], // 直角坐标系底板
    xAxis: [], // 直角坐标系X轴
    yAxis: [], // 直角坐标系Y轴
    dataZoom: [], // 数据区缩放组件
    visualMap: [], // 视觉映射组件
    series: [], // 系列列表
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

1)以上大多数组件，大多都是基于绝对定位的（top/right/bottom/left/width/height）。

• 绝对数值（如：bottom:54 表示距离echarts容器底边界54像素）；
• 或基于echarts容器高度的百分比（如：right:'20%' 表示距离echarts容器右边界的距离是echarts容器宽度的20%）。

2、series常用内容

series: [{
    name: '', // 系列名称
    type: '', // 图表类型
    label: {}, // 文本标签
    itemStyle: {}, // 文字样式
    emphasis: { // 鼠标hover时高亮样式
        itemStyle: {},
    }, 
    data: [], // 数据内容数组
}...]