前端大屏echarts图表配置

大屏中echarts所遇到的配置总结

1. 自定义图形上方的文字样式，并且左右两边显示。

 xAxis: {
            show: false, // X轴的所有样式不显示
         },
 yAxis: [
                    { // 占位左边
                      triggerEvent: true,
                      show: true,
                      inverse: true,
                      data: _this.getArrByKey(data, "name"),
                      axisLine: {
                        show: false,
                      },
                      splitLine: {
                        show: false,
                      },
                      axisTick: {
                        show: false,
                      },
                      axisLabel: {
                        show: false,
                        interval: 0,
                        color: "#fff",
                        align: "left",
                        margin: 80,
                        fontSize: 13,
                        formatter: function (value, index) {
                          return "{title|" + value + "}";
                        },
                        rich: {
                          title: {
                            width: 165,
                          },
                        },
                      },
                    }, 
                    {  // 占位右边
                      triggerEvent: true,
                      show: true,
                      inverse: true,
                      data: _this.getArrByKey(data, "name"),
                      axisLine: {
                        show: false,
                      },
                      splitLine: {
                        show: false,
                      },
                      axisTick: {
                        show: false,
                      },
                      axisLabel: {
                        interval: 0,
                        shadowOffsetX: "-20px",
                        color: "#47D3FF",
                        align: "right",
                        verticalAlign: "bottom",
                        lineHeight: 30,
                        fontSize: 13,
                        formatter: function (value, index) {
                          return data[index].novalue + '户';
                        },
                      },
                    },
                  ],
            

series: [
                    {
                      name: "XXX",
                      type: "pictorialBar",
                      symbol: // 图标base64显示
                        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
                      symbolSize: [30, 30], 
                      symbolOffset: [15, 0],
                      z: 12,
                      itemStyle: {
                        normal: {
                          color: "#14b1eb",
                        },
                      },
                      data: _this.getSymbolData(data),
                    },
                    {
                      name: "条",
                      type: "bar",
                      showBackground: true,
                      barBorderRadius: 30,
                      yAxisIndex: 0,
                      data: data,
                      barWidth: 8,
                      itemStyle: {
                        normal: {
                          color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            1,
                            0,
                            [ //柱状渐变
                              {
                                offset: 0,
                                color: "#3162FF",
                              },
                              {
                                offset: 0.7,
                                color: "#6DB7FF",
                              },
                              {
                                offset: 1,
                                color: "#6DB7FF",
                              },
                            ],
                            false
                          ),
                          barBorderRadius: 0,
                        },
                      },
                      label: {
                        normal: {
                          color: "#fff",
                          show: true,
                          position: [0, "-22px"],
                          textStyle: {
                            fontSize: 14,
                          },
                          rich: {
                            a1: { //自定义样式
                              width: 40,
                              height: 18,
                              align: 'center', 
                              fontSize: 12,
                              borderWidth: 1,
                              borderColor: '#376BEB'
                            }
                          },
                          formatter: function (a) {
                             const index = 'TOP.' + (a.dataIndex + 1);
                            return  [
                                   '{a1|' + index + '}' + '  ' + a.name
                               ]
                          },
                        },
                      }
                    }
                  ],

//上述提到的方法
getArrByKey(data, k) {
            let key = k || "value";
            let res = [];
            if (data) {
              data.forEach(function (t) {
                res.push(t[key]);
              });
            }
            return res;
          },
          getSymbolData(data) {
            let arr = [];
            for (var i = 0; i < data.length; i++) {
              arr.push({
                value: data[i].value,
                symbolPosition: "end",
              });
            }
            return arr;
          },

2. 统计地图的图标配置

series: [   // 地图上的三角形图标配置
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4,
                  },
                  label: {
                    show: false,
                    color: "#fff",
                  },
                  symbol: //图片生成base64的
                    "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAVCAMAAACaPIWZAAABgFBMVEUAAAAA//9K3v9L3P9L3P9M3f9K3f9I3P9O2P9K3P9O3f9O4f9O4/9C2v8hy/8p0P9J3v8z0v9F2/9K2/9E1f9J2/8+1/9H3f9L4f9M3v8c4/8AAP9H3P9u4v9W3v9N5v9U3v+K6v9K3f9J3v9F2/+L6v9T3/8q1f9J3f+V7P8/3P9B3f872P882v+G6P9C3f8+3P8gz/8Av/8f0f832v822v+A6f802f8j2P8azP8i1/8n2P8y2v9R4P8x2f8x2P8k0f8g3/8c1f8g1/8t1/8v2P/U+P9d4P8w2P8h1f8AAP8j0/8i2f8k1f8x2P8+2/8q1f8f2v8g3/8k2/8r2P802f8m2f8c4/8e0v8j1v872f8l2v8b0f8RzP8gyv8c4/8izv8oz/8ozv8pzv8p0v872P871f861f9Z3v9Z3f9Y3f9Z3/914/904v925f+P7P+O6f+N6v+N6f+l7/+k7/+o8v++9v+78/+68//O9//P9//U+v/k/f/f+v/d+f/m/v/uQBwvAAAAYHRSTlMABD46LENhZg1gW1wkbfy/VKprZB4OpUQzggkBXviCFG3xWk1k1nEMd9RtQzR8vod7EAQhgpjFjkIUJkievKaDMhgkQIGq+b+lVQIdNU+iqm4pCDhUky8bIixxNxwPGBKcmw7IAAABHElEQVQY02NgZGLGAlgYGFjZMAE7BwMDIxsbJxcy4GZjY2YAAh423gQ+JMDPzcYABgLcgolJiUlAlJyclJwiJCwCERcVZktNS08DAhAhxinOAAUSbJIZmRCQlc0pLAUTl2aTkc3JycnNzcnJk2MTYYADeTaF/ILCoqKCQkUZJQYkoKyiWlxSUlJcqsaujiQsrc6rUVZeUVGuqaUtjSwupaOrV1lZVa1vYMiIJG6kbmxiWlNba2ZuYSmFpIHR0Mraxrau3s7ewRFZ3MjQydnF1c3dwxNV3Evd28fXz98vwCLQEtl86SBLp+CQUHOLsHB1I2T3G0lZRkRGRVvFGDIiuxMoERRrGWcZL8UojSouLc3IGMTI6IUqCpVC4gAAukw55ZQIOlAAAAAASUVORK5CYII=", //定位图标样式
                  symbolSize: 20,
                  //点的名称和经纬度
                  data: this.cityList,
                }
    ]