echarts设置折线图圆滑渐变(自定义颜色，超出数量后随机设置颜色)

本文介绍: echarts 设置折线图圆滑渐变(自定义颜色，超出数量后随机设置颜色)

&lt;!-- echartscom.vue --&gt;
&lt;template&gt;
  &lt;div :id="dom" class="chart"&gt;</div&gt;
</template&gt;

<script&gt;
import * as echarts from "echarts";
export default {
  name: "echartLine",
  props: ["dom", "data", "isResize"],
  data() {
    return {
      myChart: null,
      color: [
        "#044a75",
        "#00a42e",
        "#b97a56",
        "#3f48cc",
        "#00a8f3",
        "#9017e5",
        "#f7139a",
        "#f5cc05",
        "#50d1fb",
        "#3fe27b",
        "#f65852",
        "#916efa"
      ],
      // color:['#044a75'],

      option: {
        // backgroundColor: "#394056",
        title: {
          // text: "请求数",
          textStyle: {
            fontWeight: "normal",
            fontSize: 16,
            color: "#F1F1F3"
          },
          left: "6%"
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(3, 22, 75, 0.8)",
          textStyle: {
            color: "white" //设置文字颜色
          },
          axisPointer: {
            lineStyle: {
              color: "#6a7985"
            }
          }
        },
        legend: {
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],

          width: "80%",

          bottom: 10,
          orient: "horizontal",

          left: "center",
          type: "scroll",
          //图例过多滚动翻
          formatter: function(params) {
            if (!params) {
              return "";
            }
            if (params.length > 7) {
              params = params.slice(0, 5) + "...";
              return params;
            } else {
              return params;
            }
          },
          pageIconColor: "#1E92CE",
          pageIconInactiveColor: "#18658d",
          pageIconSize: 12,
          pageTextStyle: {
            color: "#1E92CE"
          },

          textStyle: {
            fontSize: 12,
            color: "#F1F1F3"
          }
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "15%",
          containLabel: true
        },
        xAxis:
        
          {
            type: "category",
            boundaryGap: false,

            axisTick: {
              show: true
            },
            axisLabel: {
              show: true,

              //横坐标颜色
              color: "rgba(255, 255, 255, 0.8)"
            },
            axisLine: {
              lineStyle: {
                // color: "#57617B"
                color: "#5572BD"
              }
            },
            data: []
          },


        yAxis: [
          {
            type: "value",
            name: "单位（%）",
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0, 132, 255, 0.8)"
              }
            },
      
            axisLabel: {
         
              color: "rgba(0, 132, 255, 0.8)",
              interval: 0
            },
            splitLine: {
              show: true,

              lineStyle: {
                type: "dashed",
                color: "rgba(85,144,189,0.4)"
              }
            }
          }
        ],
        series: []
      
      }
    };
  },
  methods: {
    
    init() {
      this.option.legend.data = this.data.item;
      this.option.xAxis.data = this.data.labels;
      this.option.series = [];
      this.data.datas.forEach((item, index) => {
        if (index > this.color.length-1) {
          // 当类型超过自定义颜色数量随机生成颜色
          var a = Math.random(); // 调⽤静态对象⽅法抛出随机数a
          var b = a.toString(16); // 把a转换为16进制的字符串
          console.log(b.length); // 15
          /* 进制的问题，为什么不是16（就像⼗进制为什么只有9⽽没有10） */
          var c = b.substr(-6); // 截取字符串后六位
          var color =
            "#" +
            Math.random()
              .toString(16)
              .substr(-6); // 加上'#'串联成⼀⾏代码
          this.color.push(color);

        }
        this.option.series.push({
          name: this.data.item[index],
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 0.5
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: this.color[index]
                  },
                  {
                    offset: 1,
                    color: "rgba(219, 50, 51, 0)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: this.color[index],
              borderColor: "rgba(63,72,204,0.3)",
              borderWidth: 12
            }
          },
          data: item
        });
      });
    
      this.drawCharts();
    },
    drawCharts() {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart.clear();
        this.myChart = undefined;
      }
      this.myChart = echarts.init(document.getElementById(this.dom));
      this.myChart.setOption(this.option, true);
    }
  },
  watch: {
    data: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        this.init();
      },
      deep: true
    },
    isResize: function() {
    //重绘
      this.myChart.resize();
    }
  },
  mounted() {

  },
  destroyed() {

  },
  components: {}
};
</script>

后台返回参数
item：类型；
datas：数组值
labels：横坐标

{
  "msg": "操作成功",
  "code": 200,
  "data": {
    "item": ["主干道", "冷轧库房", "热轧库房"],
    "datas": [
      ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"],
      ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"],
      ["0", "0", "0", "0", "0", "4", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"]
    ],
    "labels": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"]
  }
}

原文地址:https://blog.csdn.net/weixin _44583871/article/de tails/125525717

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。