Echarts常用的配置使用笔记

土豆刚

已于 2024-09-04 16:42:06 修改

阅读量189

点赞数 1

文章标签： echarts 笔记 javascript

于 2024-08-30 16:23:30 首次发布

本文链接：https://blog.csdn.net/qq_27426861/article/details/141721010

版权

let option = {
    //图表的名称，会展示在图表顶部
    title: {
      text: '图表笔记'
    },
    //控制图例 也就是图表顶部或者右边的一个标签说明
    legend: {
       show : true,
       //类似于position：absolute时候的边距
       right: 10,
       top: 20,
       //文字样式
       textStyle: {
          color: "#ffff",
          width: 40,//item文字的宽度为140
          overflow: 'truncate',//文字超出就截断
          ellipsis: '...' //文字超出时，末尾显示省略号
       },
       //对展示的文字内容进行格式化，基本上文字展示的地方都可以使用到这个方法 
       formatter:function(name){
            return "老铁666" + name;
       },
       data : ['aa','bbb']//指定展示的标签和顺序，不指定则会根据 series 中的name 展示
       //鼠标悬浮图例展示文字
       tooltip : {
            show : true
       }
    },
    //鼠标悬浮到图表上的展示信息配置
    tooltip: {
        show : false,
        trigger: 'axis'//这里的axis表示展示所有信息 比如多个折线图的时候，默认只展示一个
        //具体其他变量可以看官方文档，这样就可以跟需要重新组合展示方式 使用\r\n换行
        formatter ："用模板变量如{c}",
        //这种方式更加灵活 可以使用html标签
        formatter: function (params, ticket, callback) {
            return "老铁666<hr/>" + params.data.value;
        }
    },
    //其他工具 比如下载图表为图片
    toolbox: {
       feature: {
           saveAsImage: {}
       }
    },
    //控制图表的位置，偏移等
    grid : {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true//grid 区域是否包含坐标轴的刻度标签
    },
    //x轴的标签管理 注意这里是一个对象，实际也可以是[{}]这种形式，比如可能 折线图和饼图放一起，但是使用不同的坐标，那么只需要在 series 中指定 yAxisIndex: 0,就可以关联 x轴应该也是同理的
    xAxis : {
        type: 'category',
        boundaryGap: false,//是否撑满整个x轴,
        data : ['周一','周二','周三','周四','周五','周六','周日'],
        //管理标签的样式 Y 轴同理
        nameRotate : 50,//坐标轴名字旋转，角度值
        axisLabel : {
            //旋转标签
            rotate : "-10",//刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
            //标签间距
            margin: 25,
            //文字样式
            textStyle : {
                color : "rgba(5, 214, 255, 1.0)",
                fontSize : 10,
                align :  'center' //对齐方式
            }
        },
        axisTick : {
            show : true//显示坐标刻度
        },
          
    },
    //y轴的控制
    yAxis: {
        type: 'value',//根据数据来生成y坐标标签 也可以改成 category 然后加data : [10,50]这种来指定y轴标签
        splitNumber:5,//坐标轴 分成几段
        interval ： 20,//或者强制每隔多少分一段
        min:0,//指定 最大最小范围 否则是自动根据具体数值来的
        max:1000,
        //管理标签的样式
        axisLabel : {
            
        }
        
    },
    //图标中间显示内容， 通常用于环形饼图 也是多层的
    graphic: [
           { //环形图中间添加文字
                type: 'text', //通过不同top值可以设置上下显示
                left: 'center',
                top: '40%',//偏移
                style: {
                    text: "100",
                    textAlign: 'center',
                    fill: '#ffd44a', //文字的颜色
                    width: 30,
                    height: 30,
                    fontSize: 20,
                    fontFamily: "Microsoft YaHei",
               }
            },
            { //环形图中间添加文字
                type: 'text', //通过不同top值可以设置上下显示
                left: 'center',
                top: '50%',
                style: {
                    text: "全部人员",
                    textAlign: 'center',
                    fill: '#fff', //文字的颜色
                    width: 30,
                    height: 30,
                    fontSize: 20,
                    fontFamily: "Microsoft YaHei",
               }
            }
     ],
    //具体图表内容
    series : [
        //柱状图示例
        {
            type: "bar",
            data : [...对应X轴个数],
            barWidth: 10,//柱子宽度
            //柱子样式
            itemStyle: {
                  //默认展示样式 另外还有个鼠标悬浮样式，
                  normal: {
                        //圆角
                        barBorderRadius:[5, 5, 0, 0],
                        // 颜色 可以直接是 颜色值，也可以设置渐变
                        color : new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#16E2AD'},
                                            {offset: 1, color: '#C0F7E9'}
                                        ]
                                )
                   },
                    //鼠标悬浮到图表上的时候的样式，配置内容应该是normal相同
                   emphasis ： {
                    
                    }
            },
        },
        //折线图
        {
            type: "line",
            smooth: true,//是否平滑
            //线条样式，应该也可以用 normal 等属性
            lineStyle: {
                color: '#FCDD60'
            },
            //线条与x轴的区域样式
            areaStyle: {
              normal : {
                color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#FCDD6066'},
                                      {offset: 1, color: '#FCDD6000'}
                                 ]
                                )
              }
            }
        }
    ]

}

基本上所有的展示文本样式都是可调整的，将echarts挂载的那个元素 div 看做是画布，这个画布上放了一层一层的玻璃每一层玻璃都可以是一个图也就是series 中的每一个对象就是在单独的一层玻璃上画的，也有属性可以控制是否可以拖动，或者设置偏移就更能直观感受到。x轴 y轴也是可以多层。

如果要对图表中的某个块配置通常就是 itemStyle，然后是 normal,如果想要鼠标悬浮后图表的样式有所变化，那么就是 emphasis