ECharts_通用配置_title_tooltip__toolbox_legend(任何图形都可以使用)

清风不是明月

已于 2022-03-29 19:30:28 修改

阅读量237

点赞数

分类专栏：前端_Echarts 文章标签： echarts

于 2022-02-07 20:17:24 首次发布

本文链接：https://blog.csdn.net/weixin_55806809/article/details/122814134

版权

前端_Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客详细解析了ECharts图表的配置项，包括标题设置、提示框组件、内置工具栏以及x轴和y轴的配置。通过实例展示了如何创建具有交互性和可视化的数据展示，适用于前端开发者理解和使用ECharts进行数据可视化。

摘要由CSDN通过智能技术生成

let option = {
        //标题
        title: {
            text: '成绩',
            //文字样式
            textStyle: {
                color: 'red',
            },
            //标题边框
            borderWidth: 5,//边框宽度
            borderColor: 'blue',//边框颜色
            borderRadius: 4,// 边框圆角
            //位置(还有right/bottom)
            left: 30,
            top: 20,
        },
        //提示框组件,鼠标划过或点击的提示框
        tooltip: {
            //触发类型
            trigger:'axis', //item：鼠标移入内部触发 ;axis：移入坐标轴除法
            //触发时机
            triggerOn:'click',// mouseover:鼠移入（默认），click：点击
            //格式化
            // formatter:'{b}的成绩：{c}',// 字符串模板；
            formatter:function (arg) { // 回调函数
                console.log(arg[0])
                return arg[0].name
            },
        },
        //内置工具栏(导出图片，数据视图，动态类型切换，数据区域缩放，重置)
        toolbox:{
            feature:{
                saveAsImage:{},// 导出图片
                dataView:{},// 数据视图
                restore:{},// 重置
                dataZoom:{}, //区域缩放
                magicType:{type:['bar','line']},//动态图标类型切换
            }
        },
        // 对系列列表series进行筛选
        legend:{
            data:['语文','数学']//需要与series中的name值对应上
        },
        xAxis: {
            ......
        },
        yAxis: {
            ......
        },
        series: [
            {
                name: '语文',
                ......
            },
            {
                name: '数学',
                ......
            }
        ]
    }