echarts旭日图和雷达图

旭日图 :

let option = {
  tooltip: {
    trigger: "item",
  },
  color: ["#0001F7aa", "#1CD5FFdd"],
  angleAxis: {
    type: "category",
    data: [
      "成都",
      "绵阳",
      "自贡",
      "攀枝花",
      "泸州",
      "德阳",
      "广元",
      "遂宁",
      "乐山",
      "宜宾",
      "雅安",
      "广安",
      "巴中",
      "资阳",
      "眉山",
      "南充",
    ],
    boundaryGap: true, //标签和数据点都会在两个刻度之间的带(band)中间
    axisTick: {
      show: true, //是否显示坐标轴刻度
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: "dashed",
        color: "#ffffff10",
      },
    },
    axisLabel: {
      show: true,
      color: "#fff",
    },
  },
  legend: {
    orient: "horizontal", // horizontal vertical
    show: true,
    data: ["a类", "b类"],
    right: "5%",
    top: "5%",
    icon: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    itemGap: 10,
    itemHeight: 4,
    itemWidth: 4,
    inactiveColor: "#789", // 图例关闭时的颜色。
    textStyle: {
      color: "#fff",
    },
  },
  radiusAxis: {
    axisLabel: {
      show: true,
    },
    axisTick: {
      show: true, //是否显示坐标轴刻度
    },
    axisLine: {
      show: true, //是否显示坐标轴轴线
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
      },
    },
  },

  polar: {
    radius: "66%", // 半径
    center: ["50%", "50%"], // 中心位置
  },
  series: [
    {
      type: "bar",
      name: "a类",
      data: [100, 120, 130, 20, 20, 30, 40, 60, 10, 20, 30, 20, 20, 30, 40, 60],
      coordinateSystem: "polar",
      stack: "a",
    },
    {
      type: "bar",
      name: "b类",

      data: [-10, -12, "", "", "", "", "", "", "", "", "", "", -20, 30, 40, 60],
      coordinateSystem: "polar",
      stack: "a",
    },
  ],
};

雷达图: 

let option = {
  radar: {
    name: {
      textStyle: {
        color: "#fff",
        borderRadius: 3,
        padding: [3, 5],
      },
    },
    nameGap: 10,
    splitNumber: 3,
    splitArea: {
      areaStyle: {
        color: ["#0D2E6F", "#08245Bff", "#061B45"],
      },
    },
    axisLine: {
      lineStyle: {
        color: "rgba(33,129,218,0.2)",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(71,133,220,0.2)",
      },
    },
    indicator: [
      { name: "成都", max: 1000 },
      { name: "眉山", max: 1000 },
      { name: "巴中", max: 1000 },
      { name: "广安", max: 1000 },
      { name: "雅安", max: 1000 },
      { name: "达州", max: 1000 },
      { name: "南充", max: 1000 },
      { name: "宜宾", max: 1000 },
      { name: "资阳", max: 1000 },
      { name: "乐山", max: 1000 },
      { name: "内江", max: 1000 },
      { name: "遂宁", max: 1000 },
      { name: "广元", max: 1000 },
      { name: "德阳", max: 1000 },
      { name: "泸州", max: 1000 },
      { name: "攀枝花", max: 1000 },
      { name: "自贡", max: 1000 },
      { name: "绵阳", max: 1000 },
    ],
  },
  series: [
    {
      name: "风速",
      type: "radar",
      data: [
        {
          value: [400, 500, 800, 700, 500, 900, 500, 300, 800, 500],
          name: "风速",
          areaStyle: {
            normal: {
              color: "rgba(69,140,224,0.3)",
            },
          },
          lineStyle: {
            width: 1,
            color: "#4596E0",
          },
          itemStyle: {
            color: "rgba(45,197,255,0.9)",
          },
        },
      ],
    },
  ],
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值