首页 前端知识 echarts 常见的组件有哪些?

echarts 常见的组件有哪些?

2024-06-18 00:06:54 前端知识 前端哥 549 766 我要收藏

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);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12533.html
标签
评论
发布的文章

jQuery基本使用

2024-06-24 02:06:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!