echarts相关配置项，总结

最新推荐文章于 2023-06-14 00:56:09 发布

黑天后白天

最新推荐文章于 2023-06-14 00:56:09 发布

阅读量586

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/weixin_43992935/article/details/95635862

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文总结了Echarts的主要配置项，包括图标颜色的设定，饼状图的label和labelline配置以决定数据及线是否显示，以及图例的不同显示方式。此外，还讨论了图表如何随窗口尺寸变化自动缩放。

1，echarts图标颜色值设置：

normal : {

        color:function(params) {

        //自定义颜色

                var colorList = ['#5580EB','#486CC7', '#F2637B', '#5254CF', '#36CBCB', '#975FE4', '#435188', '#FBD337', '#4ECB73', '#3AA0FF'];

                return colorList[params.dataIndex]

        }

},

在这里插入图片描述

2，饼状图，label与labelline配置，是否在图上展示数据和线

 label: {
   normal: {
        show: false, //是否展示数据
        formatter:'{b}' //数据展示格式
    },
    emphasis: {
        show: true
    }
},
lableLine: {
    normal: {
        show: ture, //是否展示线
    },
    emphasis: {
        show: true
    },
},

在这里插入图片描述

3，图例的显示方式：

  legend: {
    orient: 'vertical',  //图例显示方向
    show: true， //是否显示
    type: 'scroll', //过多时，可以滚动图例
    left: 'left', //显示位置
    height: '220px'，//添加滚动时，可以加高度
    data: ['考古勘察和文物影响评估', '地震安全性评估', '地质灾害危险性评估', '环境影响评价'],
    },

在这里插入图片描述
4，图标随着窗口缩放而缩放

 // 窗口大小改变事件
   var project_steps_echarts = null;
   project_steps_echarts = echarts.init(document.getElementById('project-steps-echarts'));
   window.onresize = function(){
        if(project_steps_echarts){
            project_steps_echarts.resize();
        };
    }