当前位置: 首页>前端>正文

如何获取echarts中series默认的颜色 echarts的series属性


目录

  • echarts 之配置属性
  • 饼形图


echarts 之配置属性

  • 南丁格尔图 roseType: “radius”,

如何获取echarts中series默认的颜色 echarts的series属性,如何获取echarts中series默认的颜色 echarts的series属性_图例,第1张

  • 双层饼形图

如何获取echarts中series默认的颜色 echarts的series属性,如何获取echarts中series默认的颜色 echarts的series属性_数据_02,第2张

饼形图

  • 配置属性,也就是再 option 里面书写修改图形的样式
  • color:图形的颜色设置 数组
  • title : 是否显示组件的标题(一般用于显示标题,或者计算总数)
  • tooltip:提示框,用于鼠标滑过的时候,显示当前想要显示的内容
  • formatter:一般用于处理文本的显示,可以玩出各种骚操作
  • legend:显示图例的说明 里面的left方位可以使用的是 位置(center) 和 百分比(5%)
  • textStyle:文本的样式 fontSize color padding等
  • series:用于显示每一个数据 => {},{},{}
  • 注意点:就是若是要显示两层,就是外层的有连接线,里层只是显示 百分比,那么则需要两个{},然后对于内层只是显示百分比的,需要在label之中 设置一个定位 position: "inner", 表示显示内层
  • type:类型 bar line pie
  • roseType: “radius”, 是否显示南丁格尔图 ‘radius’ 半径展现数据的大小。‘area’ 半径展现数据大小。
  • minAngle:最小占比,就是用于显示占比很小,但是又需要显示的那种
    *radius & center: 半径 & 中心点
  • data:数据的显示,为数组形式
  • itemStyle: 对每一项 进行占比留白 需要设置normal下的 borderColor & borderWidth
  • labelLine:连接线的设计 length: 6, length2:10, 有外线1和外线2 ;lineStyle 设置线的颜色
  • label:就是对series中的每一个数据进行样式的修饰
  • labelLine:是否显示连接线
  • normal
  • formatter:对文本的修饰 然后对 rich 的样式的使用 "{meony|" + XXX + "}"
  • rich:就是样式的设计 比如:rich:{ money:{ 里面写样式 } }
title: [
  {
    //修改总价格  lastTotal 再外层进行计算后 再显示与标题之中 一般放在正中央
    text: "\n{val|" + lastTotal+ "}",
    top: this.top,
    left: "center",
    textStyle: { // title的文本 样式修饰
      rich: {
        val: {
          fontSize: 20,
          fontWeight: "bold",
          color: "#1A1A1E",
        },
      },
    },
  },
],
 tooltip: {
   trigger: "item", // 触发项 就是每一个item 针对散点和饼形图; axis 针对柱状图 
   borderColor: "rgba(255,255,255,.3)",
   backgroundColor: "rgba(13,5,30,.6)",
   borderWidth: 1,
   padding: 5,
   // 处理文本的显示
   formatter: function (parms) {
     var str =
       parms.marker +
       "" +
       parms.data.name +
       "</br>" +
       "金额:" +
       formatNumber(parms.data.meony) +
       "亿元</br>" +
       "占比:" +
       parseFloat(parms.percent).toFixed(1) +
       "%";
     return str;
   },
 },
 // 显示图例的说明  left 这边可以使用的是 位置 和 百分比 
 legend: {
   left: "center",
   left: "5%",
   bottom: "5%",
   itemWidth: 10,
   itemHeight: 10,
   textStyle: {
     color: "#73747E",
     fontSize: "12",
   },
 },
 series: [
          {
            type: "pie",
            minAngle: 17, //设置扇形的最小占比
            radius: this.radius,
            center: this.pieChartSimpleCenter,
            data: echartData,
            hoverAnimation: false,
            // 对每一项 进行占比留白
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            labelLine: {
              normal: {
                length: 6,
                length2: 10,
                // lineStyle: {//连接线
                //   color: "#e6e6e6",
                // },
              },
            },
            label: {
              labelLine: {
                show: true,
              },
              normal: {
                formatter: (params) => {
                  return "{meony|" + formatNumber(params.data.meony) + "}";
                },
                rich: {
                  meony: {
                    fontSize: 12,
                    fontWeight: "bold",
                    color: "#1A1A1E",
                  },
                },
              },
            },
          },
          //显示内层
          {
            name: "",
            type: "pie",
            minAngle: 17, //设置扇形的最小占比
            radius: this.radius,
            center: this.pieChartSimpleCenter,
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 3,
              borderColor: "#fff",
            },
            label: {
              color: "#000",
              show: true,
              position: "inner",
              width: 10,
              height: 0,
              lineHeight: 0,
              formatter: function (p) {
                let percent = parseFloat(p.percent).toFixed(1);
                return "\n{white|" + percent + "%}";
              },
              align: "center",
              rich: {
                white: {
                  fontSize: 12,
                  color: "#fff",
                  align: "center",
                  padding: [0, -2, 0, 0],
                },
              },
            },
            labelLine: {
              show: false,
            },
            // 饼形图数据
            data: echartData,
          },
 ],



https://www.xamrdz.com/web/22u1935937.html

相关文章: