摸鱼的echarts属性记录

907 阅读9分钟

echarts属性提示

属性太多了,根本记不住,每次写了又要查,好烦,自己记录下吧

饼图

自定义label-加图片

效果

image.png

image: e1这个e1是自己定义的图片

series: [
  {
    name: '构成',
    type: 'pie',
    radius: '60%',
    itemStyle: {
      borderRadius: '50%',
      borderColor: '#fff',
      borderWidth: 2
    },
    data: [
      {
        value: 1048,
        name: '测试1',
        label: {
          formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
          rich: {
            Sunny: {
              height: 30,
              align: 'left',
              backgroundColor: {
                image: e1
              }
            },
            value: {
              width: 10,
              padding: [0, 20, 0, 10],
              align: 'left'
            },
            rate: {
              width: 20,
              align: 'right',
              padding: [0, 10, 0, 0]
            }
          }
        }
      },
      {
        value: 735,
        name: '测试2',
        label: {
          formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
          rich: {
            Sunny: {
              height: 30,
              align: 'left',
              backgroundColor: {
                image: e2
              }
            },
            value: {
              width: 10,
              padding: [0, 20, 0, 10],
              align: 'left'
            },
            rate: {
              width: 20,
              align: 'right',
              padding: [0, 10, 0, 0]
            }
          }
        }
      },
      {
        value: 580,
        name: '测试3',
        label: {
          formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
          rich: {
            Sunny: {
              height: 30,
              align: 'left',
              backgroundColor: {
                image: e3
              }
            },
            value: {
              width: 10,
              padding: [0, 20, 0, 10],
              align: 'left'
            },
            rate: {
              width: 20,
              align: 'right',
              padding: [0, 10, 0, 0]
            }
          }
        }
      },
      {
        value: 484,
        name: '测试4',
        label: {
          formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
          rich: {
            Sunny: {
              height: 30,
              align: 'left',
              backgroundColor: {
                image: e4
              }
            },
            value: {
              width: 10,
              padding: [0, 20, 0, 10],
              align: 'left'
            },
            rate: {
              width: 20,
              align: 'right',
              padding: [0, 10, 0, 0]
            }
          }
        }
      },
      {
        value: 300,
        name: '测试5',
        label: {
          formatter: ['{Sunny|} {value|{b}} {d}%'].join('\n'),
          rich: {
            Sunny: {
              height: 30,
              align: 'left',
              backgroundColor: {
                image: e5
              }
            },
            value: {
              width: 10,
              padding: [0, 20, 0, 10],
              align: 'left'
            },
            rate: {
              width: 20,
              align: 'right',
              padding: [0, 10, 0, 0]
            }
          }
        }
      }
    ]
  }
]

饼图标题水平垂直居中

效果

image.png

    title: {
      text: '当年',
      x: 'center',
      y: 'center',
      left: '28%',
      textAlign: 'center',
      textStyle: {
        color: '#FFF'
      }
    },

饼图展示百分比

效果

image.png

    label: {
      show: true,
      formatter: '{b}:{d}%', // \n 可以换行
      textStyle: {
        align: 'center',
        baseline: 'middle',
        fontSize: 14,
        fontWeight: '100',
        color: '#FFFFFF'
      },
    },

饼图图案显示距离

效果

image.png

series: [{
    label: {
      show: true,
      position: 'insideBottom', // inside内部中央,insideBottom内部靠下方
      formatter: '{b}',
      textStyle: {
        align: 'center',
        baseline: 'middle',
        fontSize: 14,
        fontWeight: '100',
        color: '#FFFFFF'
      },
    },
    labelLine: {
      smooth: true,
      length: 1, // 第一段的长度
      length2: 1, // 第二段的长度
      lineStyle: {
        width: 1.5
      }
    }
}]

饼图的位置啊,内圈缩放啊

效果

image.png

    series: [
      {
        type: 'pie',
        radius: ['60%', '70%'], // 圆环效果的
        center: ['50%', '60%'], // 摆放位置的
        color:['rgba(29, 101, 210, 1)', 'rgba(77, 201, 206, 1)'],// 设置属性颜色的
        label: {// 设置选中框效果的
          show: true,
          color: '#FFFFFF',
          formatter: '{d} %\n{b}',
          fontSize: 14,
        },
        data: [
          { value: 1048, name: '今日用电量' },
          { value: 735, name: '今日发电量' },
        ]
      }
    ]

修改legend图例带百分比

效果

image.png 代码

    legend: {
      orient: 'middle',
      x:'right',      //可设定图例在左、右、居中
      y:'center',     //可设定图例在上、下、居中
      itemWidth:16,   //图例的宽度
      itemHeight:10,  //图例的高度
      textStyle:{     //图例文字的样式
        color:'#FFFFFF',
      },
      formatter(name:any) {// 图例带百分比
        // console.log(Propecharts);
        const than = eOptions1.value.series[0].data; //获取series中的data
        let total = 0;
        let tarValue = 0;
        for (let i = 0, l = than.length; i < l; i++) {
          total += than[i].value;
          console.log(total);
          if (than[i].name == name) {
            tarValue = than[i].value;
          }
        }
        const p = ((tarValue / total) * 100).toFixed(1);
        return name + " " + " " + p + "%";
      }
    },

柱状图

堆叠图 tooltip显示百分比

效果

image.png

tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    },
    formatter: function(params) {//这里就是控制显示的样式
            let relVal = params[0].name;
            let value = 0;
            for (let i = 0, l = params.length; i < l; i++) {
              value += params[i].value;
            }
            for (let i = 0, l = params.length; i < l; i++) {
              //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
              relVal += '<br/>'+ params[i].marker + params[i].seriesName + '  : 数量 : '+ parseFloat(params[i].value) +', 百分比 : ' + (100 *
                parseFloat(params[i].value) / parseFloat(value)).toFixed(2) + "%";
            }
            return relVal;
          },
  },

柱状图单柱变色-纵向渐变

效果

image.png

    series: [
      {
        data: [],
        barWidth : 15,//柱图宽度
        showSymbol: false,
        type: 'bar',
        smooth: true,
        itemStyle: {
          // 定制显示(按顺序)
          color:  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: "#CF5831" // 0% 处的颜色
          }, {
            offset: 0.6,
            color: "#4AE0D3" // 60% 处的颜色
          }, {
            offset: 1,
            color: "#3ADC88" // 100% 处的颜色
          }], false)
        }
      }
    ]

柱状图顺序展示指定颜色

效果

image.png

    series: [
      {
        data: [],
        barWidth : 15,//柱图宽度
        showSymbol: false,
        type: 'bar',
        smooth: true,
        itemStyle: {
          // 定制显示(按顺序)
          color: function(params) {
            let colorList = ['#19B8AE','#FFD701','#F55B23'];
            return colorList[params.dataIndex]
          }
        }
      }
    ]

设置柱状图颜色-横向变色

image.png

    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],  
      itemStyle: {
        color: new echarts.graphic.LinearGradient (
          0, 0, 0, 1,
          [
            {offset: 0, color: '#7469EC'},
            {offset: 0.5, color: '#7469EC'},
            {offset: 1, color: '#7469EC'}
          ]
        )
      },
      type: 'bar'
    }]

设置柱状图形状和大小

效果 image.png

    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        barWidth : 10,//柱图宽度
        itemStyle: { // 圆角样式
            barBorderRadius: [10, 10, 0, 0],
        },
        type: 'bar'
    }]

折线图

左右两组数据

{
  legend: {
    // top: '5%',
    left: 'center',
    icon: 'rect',
    itemWidth:6,   //图例的宽度
    itemHeight:6,  //图例的高度
    textStyle:{     //图例文字的样式
      color:'#FFFFFF',
      fontSize: '12px'
    },
  },
  grid: {
    left: '5px',
    right: '5px',
    bottom: '5px',
    top: '20px',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      color: '#fff'
    },
    backgroundColor: 'rgba(16, 32, 40, 0.88)',
    borderRadius: 4,
    borderColor: '#20749e',
    formatter: '{b}<br/>{a0}: {c0}℃<br/>{a1}: {c1}%'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#ffffff'
      }
    },
    axisLine:{ //刻度
      lineStyle: {
        color: "rgba(219,225,255,.3)",
        // width: 1,
        type: "solid",
      },
    },
    data: []
  },
  yAxis: [
    {
      name: '℃',
      type: 'value',
      min: 0,
      max: 50,
      interval: 10,
      nameGap: 4, // --与y轴距离
      nameTextStyle: {
        fontSize: 12,
        color: '#ffffff'
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      },
    //坐标轴线样式
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', //solid实线;dashed虚线
          color: 'rgba(255,255,255,0.1)'
        }
      },
  },
    {
      name: '%',
      type: 'value',
      min: 0,
      max: 100,
      interval: 20,
      nameGap: 4, // --与y轴距离
      nameTextStyle: {
        fontSize: 12,
        color: '#ffffff'
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      },
      //坐标轴线样式
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', //solid实线;dashed虚线
          color: 'rgba(255,255,255,0.1)'
        }
      },
    },
  ],
  series: [
    {
      name:'温度',
      data: [],
      showSymbol: false,
      type: 'line',
      smooth: true,
      itemStyle: {
        // 定制显示(按顺序)
        color: 'rgba(20, 247, 233, 1)'
      },
      areaStyle: {
        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

          offset: 0,
          color: 'rgba(20, 247, 233, .39)'
        }, {
          offset: .34,
          color: 'rgba(20, 247, 233,0.25)'
        },{
          offset: 1,
          color: 'rgba(20, 247, 233,0.00)'
        }])

      }
    },
    {
      name:'湿度',
      data: [],
      showSymbol: false,
      type: 'line',
      smooth: true,
      itemStyle: {
        // 定制显示(按顺序)
        color: 'rgba(82, 185, 239, 1)'
      },
      yAxisIndex: 1,
      areaStyle: {
        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

          offset: 0,
          color: 'rgba(82, 185, 239, .39)'
        }, {
          offset: .34,
          color: 'rgba(82, 185, 239,0.25)'
        },{
          offset: 1,
          color: 'rgba(82, 185, 239,0.00)'
        }])

      }
    }
  ]
}

效果

image.png

顶点和低点

效果 image.png

    series: [
        {
            markPoint: {
              symbolSize: 30,
              data: [
                { type: 'max', name: 'Max', itemStyle: {
                    color: {
                      type: 'radial',
                      x: 0.4,
                      y: 0.4,
                      r: 0.9,
                      colorStops: [{
                        offset: 0,
                        color: '#fb3b40'
                      }, {
                        offset: 1,
                        color: 'rgb(246, 47, 78)'
                      }],
                      globalCoord: false
                    },
                    shadowColor: 'rgba(255,0,70,0.5)',
                    shadowBlur: 10,
                  }, label: {color: '#FFFFFF', position: 'top'} },
                { type: 'min', name: 'Min', itemStyle: {
                  color: {
                      type: 'radial',
                      x: 0.4,
                      y: 0.4,
                      r: 0.9,
                      colorStops: [{
                        offset: 0,
                        color: '#3bfba7'
                      }, {
                        offset: 1,
                        color: 'rgb(48, 183, 129)'
                      }],
                      globalCoord: false
                    },
                    shadowColor: 'rgba(48, 183, 129, 0.5)',
                    shadowBlur: 10,
                  }, label: {color: '#5a5a5a', position: 'top'}} }
              ]
            },
        },
    ]

折线图分段显示

效果

image.png

    visualMap: {
      show: false,
      // type: 'continuous',
      pieces: [
        {
          gt: 1,// 对应y轴刻度起始值
          lte: 2, // 对应y轴刻度结束值
          color: '#01655f'
        }, {
          gt: 2,
          lte: 3,
          color: '#5aa539'
        }, {
          gt: 3,
          lte: 4,
          color: '#fba100'
        },
        {
          gt: 4,
          lte: 5,
          color: '#ca5227'
        },
        {
          gt: 5,
          color: '#f55b23'
        },
      ],
    },
    xAxis: {
      type: 'category',
      data: []
    },

取消折线图小圆点

效果

image.png

    series: [
      {
        data: [],
        showSymbol: false,
        type: 'line',
        smooth: true
      }
    ]

y轴刻度虚线

效果

image.png

    yAxis: {
      type: 'value',
      //坐标轴线样式
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', //solid实线;dashed虚线
          color: 'rgba(255,255,255,0.2)'
        }
      },
    },

修改线型图阴影

效果

image.png

    series: [
      {
        name: 'xx',
        data: [],
        type: 'line',
        smooth: true,
        symbol: "none",
        areaStyle: {
          normal:{
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

              offset: 0,
              color: 'rgba(118, 252, 187, .39)'
            }, {
              offset: .34,
              color: 'rgba(52,255,168,0.25)'
            },{
              offset: 1,
              color: 'rgba(38,197,254,0.00)'
            }])

          }
        },
      },
    ]

设置线条颜色的

效果

image.png

    series: [
      {
        name: '电流',
        type: 'line',
        showSymbol: false,
        itemStyle: { // 设置线条颜色
          color: 'rgba(50, 125, 234, 1)'
        },
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
    }]

修改数据图节点文字样式,文字位置

image.png

    series: [
      {
        name: 'Direct',
        type: 'bar',
        stack: 'total',
        label: {
          show: true, // 展示文字
          position: 'right', // 文字位置(top(正上方)/bottom(正下方)/left(左边)/right(右边))
          textStyle: { // 文字颜色
            color: 'rgba(0,0,0,0.22)'
          }
        },
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient (
            0, 0, 0, 1,
            [
              {offset: 0, color: '#509EBE'},
              {offset: 0.5, color: '#509EBE'},
              {offset: 1, color: '#509EBE'}
            ]
          )
        },
        data: []
      },
    ]

通用

地图标点图片

const kqPointUrl = ''
series: [{
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image://' + kqPointUrl,
                symbolSize: [28, 33],
                legendHoverLink: true,
                data: [{
                        name: '动物园',
                        value: [121.681409, 29.809711],
                        pm: '优',
                        fylz: '一级',
                        upDate: '11-09 11:45',
                }, ],
        }]

y轴单位超出修改显示

效果

image.png

yAxis: [
  {
    name: '单位:123123111',
    // nameGap: 50, // y轴name与横纵坐标轴线的间距
    nameLocation: 'left',
    nameTextStyle: {
      padding: [0, 0, 0, 30, 0], // 加上padding可以调整其位置
      // y轴name的样式调整
      color: '#8A8F91'
    }
  }
],

文字提示换行

效果

image.png

    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#fff'
      },
      backgroundColor: 'rgba(16, 32, 40, 0.88)',
      borderRadius: 4,
      borderColor: '#20749e',
      formatter: '{a}<br/>{b}: {c}家'
    },

修改title提示的

效果

image.png

    legend: {
      icon: "roundRect",//  字段控制形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none`
      textStyle: {// 字体颜色的
        color: 'rgba(163, 163, 163, 1)',
      },
      itemWidth: 16,// 宽啊
      itemHeight: 6,// 高啊
      left: 'center',// 摆放位置的
    },

修改选中高亮框的

效果

image.png

    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, .8)', // 背景框的
      borderColor: 'rgba(0, 0, 0, 0)',// 设置边框的
      textStyle: { // 字体效果
        color: '#FFFFFF',
        fontSize: 15, 
        fontStyle: 'italic', 
        fontWeight: 'bold'
      }
    },

设置横向线条的,取消y轴,取消网格线

image.png

    yAxis: [
      {
        type: 'value',
        name: '电压',
        axisLine: {
          show: false,// 取消y轴的
          lineStyle: {
            color: '#A3A3A3'
          }
        },
        splitLine: {     //网格线
          show: false,
          lineStyle:{
            color: '#e0e6f1'
          }
        },
      },
    ],

label提示换行

效果

image.png

    series:[
        {
            label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center'
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33
              },
              per: {
                color: '#fff',
                backgroundColor: '#4C5058',
                padding: [3, 4],
                borderRadius: 4
              }
            }
          }
        }
    ]

改变legend样式

legend: {
top: '5%',
left: 'center',
itemWidth: 20,
itemHeight: 20,
data: [
    {icon: 'circle', name: '搜索引擎'},
    {icon: 'rect', name: '直接访问'},
    {icon: 'roundRect', name: '邮件营销'},
    {icon: 'triangle', name: '联盟广告'},
    {icon: 'diamond', name: '视频广告'},
    {icon: 'pin', name: 'SEO'},
    {icon: 'arrow', name: '定点投放'}
]
}

image.png none 就是没有的意思

修改x轴,y轴文字颜色

xAxis : [
  {
      type : 'category',
      data : [],
      axisLabel: {
        show: true,
        textStyle: {
            color: '#ffffff'
            }
     }
    }
]
yAxis : [
  {
      type : 'value',
      data : [],
      axisLabel: {
        show: true,
        textStyle: {
            color: '#ffffff'
            }
      }
    }
]

image.png

修改刻度线颜色

axisLine:{ //刻度
  show:false, // 隐藏刻度
  lineStyle: {
    color: "rgba(219,225,255,.3)", // 
    width: 0, //
    type: "solid", // 
  },
},

image.png

双轴tooltip提示修改

tooltip: {
  trigger: 'axis',
  textStyle: {
    color: '#fff'
  },
  backgroundColor: 'rgba(16, 32, 40, 0.88)',
  borderRadius: 4,
  borderColor: '#20749e',
  formatter: '{b}点<br/>{a0}: {c0}℃<br/>{a1}: {c1}%'
},

image.png

image.png

y轴刻度标题样式修改

yAxis: [{
  name: '℃',
  type: 'value',
  nameTextStyle: {
    fontSize: 14
  },
  axisLabel : {
    formatter: '{value} A'
  },
  gridIndex: 0,
  splitLine: {
    lineStyle: {
      type: 'dashed'
    }
  },
  position: 'left',--位置靠左
  nameLocation: 'middle', --位置居中
  nameTextStyle: {  // y轴name的样式调整
      padding: [0,50,0,0], // 上右下左
      color: '#FFFFFF'
  },
  nameGap: 60, --与y轴距离
  nameRotate: 90 --角度
}]

image.png