echarts不同图表的配置项解释【2】

地图

配置项

const myChart = echarts.init(document.querySelector(".demo"));
     //  1. 加载地图矢量数据
     $.getJSON(
       "https://geo.datav.aliyun.com/areas_v3/bound/220000_full.json",
       (res) => {
         // 2. 往全局echarts对象上注册map
         echarts.registerMap("chinaMap", res);
         myChart.setOption({
           // 3. geo配置项中配置type和map
           // 地理坐标系组件
           geo: {
             type: "map",
             map: "chinaMap",
             roam: true, // 是否可以鼠标或平移拖动
             label: {
               show: true, // 展示标签
             },
             zoom: 1.3, //初始化缩放比,
             center: [125.3245, 43.886841], // 设置地图中心点
           },
         });
       }
     );

效果图

雷达图

配置项

option = {
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  // 雷达图坐标组件，形如grid
  radar: {
    // shape: 'polygon',    // 雷达的形状
    // 指示器，指定各个维度的最大值
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ],
      // 图表上的文本样式
      label:{
        show:true
      },
      areaStyle:{} // 将每一个产品的雷达图形成阴影的面积
    }
  ]
};

效果图

仪表盘

配置项

option = {
  series: [
    {
      type: 'gauge',
      // 仪表盘轴线设置
      axisLine: {
        lineStyle: {
           30,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      // 刻度
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#fff',
           2
        }
      },
      // 分割线
      splitLine: {
        distance: -30,
        length: 30,
        lineStyle: {
          color: '#fff',
           4
        }
      },
      // 刻度标签
      axisLabel: {
        color: 'auto',
        distance: 40,
        fontSize: 20
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} km/h',
        color: 'auto'
      },
      data: [
        // 想要设置多个指针就在data中传递多个数组
        {
          value: 80,
          itemStyle:{
            color: 'pink'
          }
        },
        // {
        //   value: 89,
        //   itemStyle:{
        //     color: 'green'
        //   }
        // }
      ],
      // 设置最小刻度
      min: 40
    }
  ]
};

效果图