前端可视化

highcharts使用

echarts使用

示例demo(以雷达图为例)

    let echarts = require('echarts')
     initRadarChart: function() {
      if (this.radarChart) {
        this.radarChart.clear();
      }
      this.radarChart = echarts.init(document.getElementById("radarContainer"));
      let option = {
        title: {
          text: ""
        },
        tooltip: {},
        legend: {
          data: [""],
          bottom: 0,
          icon: "roundRect"
        },
        radar: {
          shape: "circle",
          radius: "65%",
          name: {
            textStyle: {
              color: "#666666",
              backgroundColor: "",
              fontSize: 16,
              borderRadius: 3,
              padding: [0, 0]
            }
          },
          axisTick: {
          },
          axisLabel: {
          },
          splitLine: {
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["#FFFFFF", "#F9FBFE"]
            }
          },
          indicator: [
            { name: "维度1", max: 100 },
            { name: "维度2", max: 100 },
            { name: "维度3", max: 100 },
            { name: "维度4", max: 100 }
          ]
        },
        series: [
          {
            type: "radar",
            symbolSize: 10,
            itemStyle: {},
            lineStyle: {},
            areaStyle: {
              opacity: 0.3
            },
            data: [
              {
                name: "数据一",
                value: [34, 45, 56, 90],
                lineStyle: {
                  color: "#368FFF"
                },
                areaStyle: {
                  color: "#368FFF"
                },
                label: {
                  show: false,
                  color: "#368FFF",
                  position: "top",
                  fontSize: 20
                },
                itemStyle: {
                  borderColor: '#368FFF',
                  borderWidth: 1
                }
              }
            ]
          }
        ]
      };
      this.radarChart.setOption(option);
    }