Echarts设置参数

晚生隆海

已于 2023-03-20 14:00:31 修改

阅读量595

点赞数

分类专栏： web前端 Vue 微信小程序文章标签： echarts 前端 javascript

于 2022-12-06 14:03:17 首次发布

本文链接：https://blog.csdn.net/thlchina/article/details/128201805

版权

web前端同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

微信小程序

8 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

经常根据设计图来调整Echarts的样式图，设置参数太多每次都需要调整，为了方便后续使用，特写此文章。

汽车仪表盘

option= {
  series: [
    {
      name: "Pressure",
      type: "gauge",
      startAngle: 90,
      endAngle: -360,
      axisLine: {
        lineStyle: {
          width: 30,
          color: [
            [0.1, "#FF9796"],
            [0.3, "#FBC32A"],
            [0.5, "#50C687"],
            [0.7, "#43A9E0"],
            [1, "#3F5CAD"],
          ],
        },
      },
      pointer: {
        show: false,
          },
     
      splitLine: {
        show: false,
        distance: 0,
        length: 10,
      },
      axisTick: {
        show: false,
      },
      //刻度
      axisLabel: {
        show: false,
        distance: 50,
      },
      data: [
        {
          value: [11, 22, 50],
          name: "SCORE",
          //上面标题
          title: {
            fontSize: 14,
            fontWeight: 700,
          },
          //下面文字
          detail: {
            width: 60,
            height: 20,
            fontSize: 14,
            formatter: "表现力",
          },
        },
      ],
    },
  ],
}

示例图：
在这里插入图片描述

option = {
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      startAngle: 90,
      endAngle: -360,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 2,
          borderColor: '#244E8F'
        }
      },
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      //刻度
      axisLabel: {
        show: false,
        distance: 50
      },
      data: [
        {
          value: 50,
          name: 'SCORE',
          //上面标题
          title: {
            fontSize: 14,
            fontWeight: 700
          },
          //下面文字
          detail: {
            width: 60,
            height: 20,
            fontSize: 14,
            formatter: '表现力'
          }
        }
      ]
    }
  ]
}

示例图：
在这里插入图片描述

雷达图

option= {
  color: ["#E51924", "#2773D5"],
  radar: {
    shape: "circle",
    indicator: [
      { name: "Sales", max: 6500 },
      { name: "Admin", max: 6500 },
      { name: "Informaty", max: 6500 },
      { name: "Custome", max: 6500 },
      { name: "Develont", max: 6500 },
      { name: "Marketing", max: 6500 },
    ],
    axisName: {
      color: "#333",
      fontSize: 14,
      fontWeight: 700,
    },
  },
  series: [
    {
      name: "Budget vs spending",
      type: "radar",
      data: [
        {
          value: [4200, 3000, 2000, 3500, 6000, 1800],
          name: "红队",
          lineStyle: {
            color: "#E51924",
            opacity: 0.8,
          },
          symbolSize: 0,
          areaStyle: {
            color: "#E51924",
          },
        },
        {
          value: [5000, 1400, 2800, 2600, 4200, 2100],
          name: "蓝队",
          symbolSize: 0,
          lineStyle: {
            color: "#2773D5",
            opacity: 0.8,
          },
          areaStyle: {
            color: "#2773D5",
          },
        },
      ],
    },
  ],
},

示例图：
在这里插入图片描述

线性图

 lineOption: {
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["A", "B", "C"],
        },
        yAxis: {
          type: "value",
        },
        grid: [
          {
            bottom: "10%",
          },
          {
            top: "10%",
          },
        ],
        series: [
          {
            type: "line",
            showSymbol: false,
            data: [0, 3, 4, 23, 0],
          },
        ],
      },

在这里插入图片描述

双饼图

option = {
  color:['#F2F2F2','#FF7815'],
  series: [
    {
      name: '123',
      type: 'pie',
      radius: ['30%', '38%'],
      color:['#FF7815','#F2F2F2'],
      label: {
        show: false
      },
      data: [
        { value:110, name: '111' },
        { value:90, name: 'F2F2F2' },
      ]
    },
    {
      name: '234',
      type: 'pie',
      radius: ['42%', '50%'],
      color:['#0073D5','#F2F2F2'],
      label: {
        show: false
      },
      data: [
        { value: 100, name: '999' },
        { value: 120, name: '333' },
      ]
    }
  ]
};