echarts 常见的组件有哪些？

1、标题组件（title）:用来显示图标的标题和副标题。

2、图例组件（legend）:永不表示各种图标类型的标记和文本。

3、提示框组件（tooltip）:在鼠标悬停在某个数据项上时，可以显示该数据项的更多信息。

4、网格组件（gride）: 在直角坐标系中，网格组件用来确定图表的位置和大小。

5、数据缩放组件（dataZoom）:用于在图表中进行缩放或者平移。

6、视觉映射组件（visualMap）:用于将数据映射到视觉元素。

7、工具箱组件（toolbox）:提供了一些工具，包括数据视图切换、数据区域缩放、图片导出等。

8、系列列表（series）:系列列表是图表的主要部分，每个系列代表一组相关的数据。

9、标记线和标记点（markLine 和 markPoint）:用于标记图表中的特定值或范围。

var myChart = echarts.init(document.getElementById('main'));
 
var option = {
    title: {
        text: 'ECharts 示例',
        subtext: '这是一个简单的 ECharts 示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['销量']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'销量',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ],
    dataZoom: [
        {
            type: 'slider',
            start: 10,
            end: 60
        },
        {
            type: 'inside',
            start: 10,
            end: 60
        }
    ],
    visualMap: {
        min: 0,
        max: 250,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: true
    }
};
 
myChart.setOption(option);复制