echarts 之常用的属性配置

echarts 之常用的属性配置

饼形图相关

        series: [
          {
            type: "pie", //类型
            center: this.pieChartCenter,// 所处位置
            radius: this.pieChartRadius, // 半径
            minAngle: 5,
            avoidLabelOverlap: true,
            roseType: "radius", // 半径类型显示
            hoverOffset: 20,
            label: { 
              show: true, // 是否显示饼形图的 文本 + 连线  从图延伸到文本
              position: "outer",
              width: 10,
              height: 0,
              lineHeight: 0,
              labelLine: { // 从图延伸到文本 线的长度
                length: 2,
                length2: 10,
              },
              backgroundColor: "auto",
              padding: [2, -2, 2, -2],
              borderRadius: 2,
              distanceToLabelLine: 0,
              // 对饼形图 字体 和 显示的字体换行 数字类型 
              formatter: "{top|{b}} \n {bottom|{c}}",
              align: "center",
              rich: {
                top: {
                  color: "#333",
                  fontSize: 12,
                  verticalAlign: "bottom",
                  padding: [2, 2, 2, 2],
                  align: "center",
                },
                bottom: {
                  color: "#333",
                  fontSize: 12,
                  padding: [2, 2, 2, 2],
                  verticalAlign: "top",
                  align: "center",
                },
              },
            },
            //饼形图的数据
            data: pieChartData,
          },
        ],

柱状图相关

简单的柱状图

      let option = {
        // 调整图的 位置
        grid: {
          left: "0",
          top: "40",
          right: "0",
          bottom: "10",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["2017", "2018", "2019", "2020"],
          axisTick: {
            show: false, //把x轴的坐标轴 刻度去掉
          },
          /*改变x轴颜色*/
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: { // x轴刻度的文本的修饰
            textStyle: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        yAxis: {
          type: "value",
          yAxisIndex: 0, //设置y轴的层叠性为0
          //y轴刻度
          axisLabel: {
            //设置y轴数值为%
            formatter: "{value}%",
            textStyle: {
              fontSize: 10,
              color: "#999",
            },
          },
          axisTick: {
            show: false, //把x轴的坐标轴 刻度去掉
          },
          /*改变y轴颜色*/
          axisLine: {
            lineStyle: {
              color: "transparent",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        series: [
          {
            data: ["1.64", "1.84", "1.71", "1.84"],
            itemStyle: {
              //此时的color可以给柱子修改颜色
              color: function (params) {
                return myColor[params.dataIndex];
              },
            },
            barWidth: "75%", //这是柱子的宽度
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%",
              },
            },
          },
        ],
      };

多柱状图

	data = [
    [ "product","name1","name2","name3"],
    [ "2017年", "1.38","1.05", "1.03"],
    ["2018年","1.42","1.96", "1.22" ],
    [ "2019年", "1.34", "1.30", "1.4" ],
    [ "2020年","1.09", "1.30", "1.03"]
  ]
      let option = {
        color: ["#1d87f0", "#af7898", "#ffca7b"],
        legend: {},
        tooltip: {},
        dataset: {
          // 数据的展示
          source: barChartData,
        },
        // 调整图的 位置
        grid: {
          left: "0",
          top: "40",
          right: "0",
          bottom: "20",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false, //把x轴的坐标轴 刻度去掉
          },
          /*改变x轴颜色*/
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            textStyle: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        yAxis: {
          type: "value",
          //y轴刻度
          axisLabel: {
            //设置y轴数值为%
            // formatter: "{value}%", // 设置y轴的百分百
            textStyle: {
              fontSize: 10,
              color: "#999",
            },
          },
          axisTick: {
            show: false, //把x轴的坐标轴 刻度去掉
          },
          /*改变x轴颜色*/
          axisLine: {
            lineStyle: {
              color: "transparent",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };

折线图

      let option = {
        xAxis: {
          type: "category",
          data: lineChartData.lineDataX, // x轴的数据
          axisTick: {
            show: false, //把x轴的坐标轴 刻度去掉
          },
          /*改变x轴颜色*/
          axisLine: {
            lineStyle: {
              color: "#ccc",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            textStyle: {
              fontSize: 10,
              color: "#666",
            },
          },
        },
        yAxis: {
          type: "value",
          // y轴刻度的设置
          max: 1100,
          min: 900,
          minInterval: 0,
          interval: 50, //每次增加几
          // formatter: function (value) { //y轴保留一位小数点
          //   return value.toFixed(1);
          // },
          axisLabel: {
            // y轴的字体
            textStyle: {
              fontSize: 10,
              color: "#666",
            },
          },
          axisTick: {
            show: false, //把y轴的坐标轴 刻度去掉
          },
          axisLine: {
            show: false, //是否显示坐标轴轴线。
          },
          splitLine: {
            lineStyle: {
              color: "#f8f8f8", // y轴的分割线
            },
          },
        },
        // 调整图的 位置
        grid: {
          left: "0",
          top: "10",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        series: [
          {
            data: lineChartData.lineData, // 折线图的数据

            type: "line",
            // 设置拐点 相关的
            symbolSize: 10,
            itemStyle: {
              borderColor: this.areaStyleColor.lineColor, //拐点颜色
              borderWidth: 3,
              color: "#333", //拐点文本
            },
            // y折轴线 的颜色
            lineStyle: {
              color: this.areaStyleColor.lineColor,
            },
            emphasis: {
              // 鼠标经过时：
              color: this.areaStyleColor.lineColor,
              borderColor: "#3987ed",
            },
            label: {
              normal: {
                show: true, // 折线上的文字是否显示
                // position: [-15, -18],
                fontSize: 10,
                position: [-15, -10],
              },
            },

            // 渐变
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.areaStyleColor.from,
                },
                {
                  offset: 1,
                  color: this.areaStyleColor.to,
                },
              ]),
            },
          },
        ],
      };