LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

Echarts的一些配置项

2022/7/5 echarts

title:标题

主标题和副标题
title: {
    text: '主标题',
    subtext: '副标题',
    top: 10,
    left: 10
  },
  也可以多个标题
   title: [ {
     text:'标题1',
     left:20,
     show:false//是否显示标题
   },
   {
     text:'这是一个长长的标题,可以换行\n哈哈',//标题文本,支持换行
     left:20,
     top:40,
    textStyle:{//文本样式
      color:'skyblue',
      fontSize:20,
    }
   }],

legend

 legend: {
            orient: 'vertical',//图例方向
            icon: 'circle',//
            type:'scroll',//图例过多时可滚动,默认plain
            itemWidth: 8, // 设置宽度
            itemHeight: 8, // 设置高度
            itemGap: 15, // 设置间距
            left: 'right',//图例组件离容器左侧的距离,可为像素值,百分比,center等
            //top:'40%',//图例组件离容器上侧的距离,同上
            bottom:'10%',//百分比或像素值,right相同
            show:true,//是否显示图例
            width:120,//图例组件的宽度。默认自适应。
            height:200,//图例组件的高度。默认自适应。
            padding: [5, 10],
            formatter: function (name) {
                let data = option.series[0].data
                let total = 0
                let tarValue
                for (let i = 0; i < data.length; i++) {
                   total += data[i].value
                   if (data[i].name === name) {
                    tarValue = data[i].value
                    }
                  }
               let v = tarValue
                return name+v+'元'
            },
            textStyle: {
              fontWeight: 400,
              fontSize: 14,
              color: '#606266',
            },
          },
          或
             legend: {
             orient: 'vertical',
             icon: 'circle',
             itemWidth: 8, // 设置宽度
             itemHeight: 8, // 设置高度
             itemGap: 15, // 设置间距
             left: '45%',
             textStyle: {
               fontWeight: 400,
               fontSize: 14,
               color: '#606266',
               rich: {
               one: {
                   fontSize: 14,
                   fontWeight: 400,
                   fontFamily: 'Microsoft YaHei-Regular, Microsoft YaHei',
                   width: 110,
                   color: '#606266',
                   padding: [0, 0, 0, 4],
                 },
                 two: {
                   fontSize: 14,
                   fontWeight: 400,
                   color: '#606266',
                 },
               },
             },
           },
             formatter: function (name) {
             let data = option.series[0].data
             let total = 0
             let tarValue
             for (let i = 0; i < data.length; i++) {
               total += data[i].value
               if (data[i].name === name) {
                 tarValue = data[i].value
               }
             }
             // 数量
             let v = tarValue
             // 百分比
             let p = Math.round((tarValue / total) * 100)
             return `{one|${name}} {two|${number_format(v, 0)}元}`
           },
img_show