事关我对于Echarts使用的那些事--其三

series的详细分类

series一般是一个数组对象,数组里每一项都表示一项数据的格式和内容信息,比如柱线图,就会存在两个对象,一个type为bar,另外一个type为line.

//
series:[
//折线图
          {
            name: "行业", //用来跟legend联动的名称
            type: "line", //表示数据要展示的种类
            data: [], //数据值
            yAxisIndex: 1, //指定为双y轴的某一项
            label: {
               show: true,
               formatter: "{c}%",
            }, //在图表数据点上面显示的内容
            // 设置折线图的折线点为实心，且设置大小
            symbol: "circle",
            symbolSize: [18, 18], //折线点的大小
            lineStyle: {
              color: "#0A69FF",
              width: 4,
            },//线的颜色和粗细
      },
      //柱状图类似,大同小异
      ....
      //饼图
      {
            type: "pie", //展示为饼图
            radius: ["55%", "70%"], //控制饼图的大小,(环形图的大小)
            center: ["50%", "50%"], //控制图表的位置,(饼图用这个,线图和柱形图用grid)
            startAngle: 145, //起始角度
            minAngle: 5,  //饼状图最小值(最小值的最小面积)
            data: [], //数据值
            label: {
              show: true,
              normal: {
                position: "outside",
                fontSize: 36,
                formatter: (params) => {
                  return params.name + ":\n" + params.value + this.unit; //文字标识可以自定义
                },
              },
            },
            // 标签线的长度
            labelLine: {
              show: true,
              length: 40, //标签线可以生成转折线,这是转折线1的长度
              length2: 40,//这是转折线2的长度
              smooth: true,
              showAbove: true,
              emphasis: {
                show: true,
              },
            },
            emphasis: {
              scaleSize: 40,
            },
          },
]

//仪表盘
 series: [
    {
      type: 'gauge', //仪表盘一般只有series,样式修改都在这里面
      progress: {
        show: true,
        width: 18
      },
      axisLine: {
        lineStyle: {
          width: 18
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        length: 15,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      axisLabel: {
        distance: 25,
        color: '#999',
        fontSize: 20
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 10
        }
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        fontSize: 80,
        offsetCenter: [0, '70%']
      },
      data: [
        {
          value: 70
        }
      ]
    }

不同的应用场景

以上四种图表其实就囊括了Echarts的大部分使用场景,包括各种图表的组合使用,交叉使用等,x轴和y轴的多种显示,左右颠倒,上下颠倒等,一切关于图表样式的修改和转换,其的目的都是为了让数据能更加易懂,能够一目了然.

事关我对于Echarts使用的那些事--其三

事关我对于Echarts使用的那些事--其三

series的详细分类

不同的应用场景

End