echarts多条折线图

已于 2023-08-18 11:47:35 修改
阅读量540 收藏
点赞数
分类专栏： echarts 前端开发 文章标签： echarts 前端 javascript
于 2023-08-15 10:15:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ingenuou_/article/details/132291653
版权

在这里插入图片描述

代码

<template>
  <div>
    <!-- 折线图 -->
    <div id="average-score1" class="risk-percent" />
  </div>
</template>
    
    <script>
import * as echarts from "echarts";

export default {
  name: "StrategicRisk",
  components: {},
  // props: ["id"],
  data() {
    return {
      // define options
      options: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.setRiskPercent2();
    });
  },
  methods: {
    lineUp(x) {
      if (x) {
        return 11 - x;
      } else {
        return x;
      }
    },
    setRiskPercent2() {
      let Ydata1 = [1, 4, 4].map(this.lineUp);
      let Ydata2 = [2, 2, 3].map(this.lineUp);
      let Ydata3 = [3, 9, 8].map(this.lineUp);
      let Ydata4 = [4, 3, 5].map(this.lineUp);
      let Ydata5 = [5, 1, null].map(this.lineUp);
      let Ydata6 = [6, 10, 10].map(this.lineUp);
      let Ydata7 = [7, 5, 1].map(this.lineUp);
      let Ydata8 = [8, null, null].map(this.lineUp);
      let Ydata9 = [9, 8, 6].map(this.lineUp);
      let Ydata10 = [10, 6, 7].map(this.lineUp);
      let Ydata11 = [null, 7, 2].map(this.lineUp);
      let Ydata12 = [null, null, 9].map(this.lineUp);

      let Ydata13 = [null, null, 3].map(this.lineUp);//排名前三
      let Ydata14 = [null, null, 4].map(this.lineUp);//排名前三
      let Ydata15 = [null, null, 5].map(this.lineUp);//排名前三

      let Ydata16 = [null, null, 9].map(this.lineUp);//本年新增
	  //预设数据格式
      let obj = {
        会计基础: {
          0: [1, 4, 4],
          1: [100, 70, 70],
          3: "topFive",
        },
        "决策管理": {
          0: [2, 2, 3],
          1: [90, 90, 80],
          3: "topFive",
        },
        合同管理: {
          0: [3, 9, 8],
          1: [80, 20, 30],
          3: false,
        },
        公司治理: {
          0: [4, 3, 5],
          1: [70, 80, 60],
          3: "topFive",
        },
        仓库管理: {
          0: [5, 1, null],
          1: [60, 100, null],
          3: false,
        },
        往来款管理: {
          0: [6, 10, 10],
          1: [50, 10, 10],
          3: false,
        },
        资金管理: {
          0: [7, 5, 1],
          1: [40, 60, 100],
          3: false,
        },
        销售管理: {
          0: [8, null, null],
          1: [30, null, null],
          3: false,
        },
        采购管理: {
          0: [9, 8, 6],
          1: [20, 30, 50],
          3: false,
        },
        制度建设: {
          0: [10, 6, 7],
          1: [10, 50, 40],
          3: false,
        },
        其他: {
          0: [null, 7, 2],
          1: [null, 40, 90],
          3: false,
        },
        往来款管理1: {
          0: [null, null, 9],
          1: [null, null, 20],
          3: "new",
        },
      };
      let dataX = ["2021", "2022", "2023"];

      // let Ydata1 = [100, 70, 70];
      // let Ydata2 = [90, 90, 80];
      // let Ydata3 = [80, 20, 30];
      // let Ydata4 = [70, 80, 60];
      // let Ydata5 = [60, 100, null];
      // let Ydata6 = [50, 10, 10];
      // let Ydata7 = [40, 60, 100];
      // let Ydata8 = [30, null, null];
      // let Ydata9 = [20, 30, 50];
      // let Ydata10 = [10, 50, 40];
      // let Ydata11 = [null, 40, 90];
      // let Ydata12 = [null, null, 20];

      // let Ydata13 = [null, null, 3];
      // let Ydata14 = [null, null, 4];
      // let Ydata15 = [null, null, 5];

      // let Ydata16 = [null, null, 9];

      var elementById = document.getElementById("average-score1");
      var myChart = echarts.init(elementById);
      myChart.setOption({
        // title: {
        //   text: "Stacked Line",
        // },
        tooltip: {
          // trigger: "axis",
          trigger: "item",
          formatter: (params, ticket, callback) => {
            // console.log("params", params, obj[params.seriesName][1]);
            let str = ``;
            let index = dataX.indexOf(params.name);
            // str = obj[params.seriesName][1][index];

            str =
              params.seriesName +
              `风险<br/>` +
              params.name +
              `年排名第` +
              obj[params.seriesName][0][index] +
              `<br/>` +
              `共上报` +
              obj[params.seriesName][1][index] +
              `项<br/>`;

            return str;
          },
        },
        legend: {
          data: [
            "会计基础",
            "决策管理",
            "合同管理",
            "公司治理",
            "仓库管理",
            "往来款管理",
            "资金管理",
            "销售管理",
            "采购管理",
            "制度建设",
            "其他",
            "往来款管理1",
          ],
          orient: "vertical",
          right: "7%",
          align: "left",
          top: "middle",
          icon: "circle",
          itemWidth: 7,
          itemGap: 10,
        },
        grid: {
          left: "4%",
          right: "30%",
          bottom: "4%",
          top: "8%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dataX,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
            // lineStyle: {
            //   type: "dotted",
            // },
          },
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            lineStyle: {
              opacity: 0.2,
              type: "dashed",
              color: "#748ca4",
            },
            // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            interval: 1, // 步长
            min: 1, // 起始
            max: 10, // 终止
            axisLabel: {
              fontSize: 14,
              fontFamily: "Alibaba-PuHuiTi-R, Alibaba-PuHuiTi",

              formatter: (value) => {
                console.log("value1", value);
                let str = "";
                if (value == 1) {
                  str = "第十名";
                } else if (value == 2) {
                  str = "第九名";
                } else if (value == 3) {
                  str = "第八名";
                } else if (value == 4) {
                  str = "第七名";
                } else if (value == 5) {
                  str = "第六名";
                } else if (value == 6) {
                  str = "第五名";
                } else if (value == 7) {
                  str = "第四名";
                } else if (value == 8) {
                  str = "第三名";
                } else if (value == 9) {
                  str = "第二名";
                } else if (value == 10) {
                  str = "第一名";
                }
                return str;
              },
            },
          },
        ],
        series: [
          // ----------------标签

          {
            name: "往来款管理12",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            lineStyle: {
              color: "transparent",
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: "right",
            //   },
            // },
            label: {
              offset: [5, 1],
              color: "#fff",
              show: true,
              position: "right",
              distance: 7.5,
              rotate: 0,
              fontSize: 15,
              verticalAlign: "middle",
              backgroundColor: "#2c95ff",
              borderRadius: [9, 9, 9, 9],
              width: 64,
              height: 26,
              align: "left",
              lineHeight: 17,
              padding: [2, 10, 2, 10],
              formatter: (value) => {
                console.log("value", value);
                let str = "连续3期排名前五";
                return str;
              },
            },
            data: Ydata13,
          },
          {
            name: "往来款管理13",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            lineStyle: {
              color: "transparent",
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: "right",
            //   },
            // },
            label: {
              offset: [5, 1],
              color: "#fff",
              show: true,
              position: "right",
              distance: 7.5,
              rotate: 0,
              fontSize: 15,
              verticalAlign: "middle",
              backgroundColor: "#2c95ff",
              borderRadius: [9, 9, 9, 9],
              width: 64,
              height: 26,
              align: "left",
              lineHeight: 17,
              padding: [2, 10, 2, 10],
              formatter: (value) => {
                console.log("value", value);
                let str = "连续3期排名前五";
                return str;
              },
            },
            data: Ydata14,
          },
          {
            name: "往来款管理14",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            lineStyle: {
              color: "transparent",
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: "right",
            //   },
            // },
            endLabel: {
              show: true,
              distance: 8.5,
              borderDashOffset: 20,
            },
            label: {
              offset: [5, 1],
              color: "#fff",
              show: true,
              position: "right",
              distance: 7.5,
              rotate: 0,
              fontSize: 15,
              verticalAlign: "middle",
              backgroundColor: "#2c95ff",
              borderRadius: [9, 9, 9, 9],
              width: 64,
              height: 26,
              align: "left",
              lineHeight: 17,
              padding: [2, 10, 2, 10],
              formatter: (value) => {
                console.log("value", value);
                let str = "连续3期排名前五";
                return str;
              },
            },
            data: Ydata15,
          },
          {
            name: "往来款管理15",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "transparent",
              },
            },
            lineStyle: {
              color: "#008080",
              // color: "transparent"
            },
            // label: {
            //   normal: {
            //     show: true,
            //     position: "right",
            //   },
            // },
            label: {
              offset: [5, 1],
              color: "#fff",
              show: true,
              position: "right",
              distance: 7.5,
              rotate: 0,
              fontSize: 15,
              verticalAlign: "middle",
              backgroundColor: "#2c95ff",
              borderRadius: [9, 9, 9, 9],
              width: 64,
              height: 26,
              align: "left",
              lineHeight: 17,
              padding: [2, 10, 2, 10],
              formatter: (value) => {
                console.log("value", value);
                let str = "2023年新增";
                return str;
              },
            },
            data: Ydata16,
          },

          // ------------折线
          {
            name: "会计基础",
            type: "line",

            // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#317ef3",
                // borderColor: "rgba(64, 162, 219, 0.5)", //圆点透明 边框
                // borderWidth: 2,
              },
            },

            lineStyle: {
              color: "#317ef3", //1
            },
            // data: [1, 4, 4],
            data: Ydata1,
          },
          {
            name: "决策管理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#8dcfa3",
              },
            },
            lineStyle: {
              color: "#8dcfa3", //1
            },
            data: Ydata2,
          },
          {
            name: "合同管理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#9085f4",
              },
            },
            lineStyle: {
              color: "#9085f4", //
            },
            data: Ydata3,
          },
          {
            name: "公司治理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#7fcdde",
              },
            },
            lineStyle: {
              color: "#7fcdde", //
            },
            data: Ydata4,
          },
          {
            name: "仓库管理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#dd773b",
              },
            },
            lineStyle: {
              color: "#dd773b", //
            },
            data: Ydata5,
          },
          //
          {
            name: "往来款管理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#f0aebc",
              },
            },
            lineStyle: {
              color: "#f0aebc",
            },
            data: Ydata6,
          },
          {
            name: "资金管理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#418b9b",
              },
            },
            lineStyle: {
              color: "#418b9b",
            },
            data: Ydata7,
          },
          // 销售管理
          {
            name: "销售管理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#e5bb45",
              },
            },
            lineStyle: {
              color: "#e5bb45",
            },
            data: Ydata8,
          },
          {
            name: "采购管理",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#b256e7",
              },
            },
            lineStyle: {
              color: "#b256e7",
            },
            data: Ydata9,
          },
          {
            name: "制度建设",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#abc0fb",
              },
            },
            lineStyle: {
              color: "#abc0fb",
            },
            data: Ydata10,
          },
          {
            name: "其他",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#5aa52c",
              },
            },
            lineStyle: {
              color: "#5aa52c",
            },
            data: Ydata11,
          },
          {
            name: "往来款管理1",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            itemStyle: {
              normal: {
                color: "#008080",
              },
            },
            lineStyle: {
              color: "#008080",
            },
            data: Ydata12,
          },
        ],
      });
      window.addEventListener("resize", function () {
        //自适应屏幕大小
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
.parent {
}
.risk-percent {
  width: 100%;
  height: 300px;
  flex-shrink: 1;
  flex-grow: 1;
  margin-top: 30px;
}
</style>

代码优化

//代码优化
<template>
  <div>
    <!-- 折线图 -->
    <div id="average-score1" class="risk-percent" />
  </div>
</template>
    
    <script>
import * as echarts from "echarts";

export default {
  name: "StrategicRisk",
  components: {},
  // props: ["id"],
  data() {
    return {
      // define options
      options: [],
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.setRiskPercent2(val);
    // });
  },
  methods: {
    lineUp(x) {
      if (x == "null") {
        x = null;
      }
      if (x) {
        return 11 - x;
      } else {
        return x;
      }
    },
    setRiskPercent2(val) {
      console.log("val12121setRiskPercent2", val);

      //let Ydata1 = [1, 4, 4].map(this.lineUp);
     // let Ydata2 = [2, 2, 3].map(this.lineUp);
      //let Ydata3 = [3, 9, 8].map(this.lineUp);
      //let Ydata4 = [4, 3, 5].map(this.lineUp);
      //let Ydata5 = [5, 1, null].map(this.lineUp);
      //let Ydata6 = [6, 10, 10].map(this.lineUp);
      //let Ydata7 = [7, 5, 1].map(this.lineUp);
      //let Ydata8 = [8, null, null].map(this.lineUp);
      //let Ydata9 = [9, 8, 6].map(this.lineUp);
      //let Ydata10 = [10, 6, 7].map(this.lineUp);
      //let Ydata11 = [null, 7, 2].map(this.lineUp);
      //let Ydata12 = [null, null, 9].map(this.lineUp);

      //let Ydata13 = [null, null, 3].map(this.lineUp);
      //let Ydata14 = [null, null, 4].map(this.lineUp);
      //let Ydata15 = [null, null, 5].map(this.lineUp);

      //let Ydata16 = [null, null, 9].map(this.lineUp);

      let obj1111 = {
        会计基础: {
          0: [1, 4, 4],//排名
          1: [100, 70, 70],//数量
          3: "topFive",
        },
        "决策管理": {
          0: [2, 2, 3],
          1: [90, 90, 80],
          3: "topFive",
        },
        合同管理: {
          0: [3, 9, 8],
          1: [80, 20, 30],
          3: false,
        },
        公司治理: {
          0: [4, 3, 5],
          1: [70, 80, 60],
          3: "topFive",
        },
        仓库管理: {
          0: [5, 1, null],
          1: [60, 100, null],
          3: false,
        },
        往来款管理: {
          0: [6, 10, 10],
          1: [50, 10, 10],
          3: false,
        },
        资金管理: {
          0: [7, 5, 1],
          1: [40, 60, 100],
          3: false,
        },
        销售管理: {
          0: [8, null, null],
          1: [30, null, null],
          3: false,
        },
        采购管理: {
          0: [9, 8, 6],
          1: [20, 30, 50],
          3: false,
        },
        制度建设: {
          0: [10, 6, 7],
          1: [10, 50, 40],
          3: false,
        },
        其他: {
          0: [null, 7, 2],
          1: [null, 40, 90],
          3: false,
        },
        往来款管理1: {
          0: [null, null, 9],
          1: [null, null, 20],
          3: "new",
        },
      };
      let dataX = ["2020", "2021", "2022"];
      let legendData = Object.keys(obj1111);
      let colorList = [
        "#317ef3",
        "#8dcfa3",
        "#9085f4",
        "#7fcdde",
        "#dd773b",
        "#f0aebc",
        "#418b9b",
        "#e5bb45",
        "#b256e7",
        "#abc0fb",
        "#5aa52c",
        "#008080",
        "#3171f1",
        "#81c1a1",
        "#9181f1",
        "#71c1d1",
        "#d17131",
        "#f1a1b1",
        "#418191",
        "#e1b141",
        "#b151e1",
        "#a1c1f1",
        "#51a121",
        "#018181",
      ];
      let i = 0;
      let seriesList = [];
      let seriesList2 = [];
      for (let key in obj1111) {
        // obj[key][0].map(this.lineUp)
        console.log("key", key, obj1111[key]);

        console.log("obj[key]", obj1111[key], obj1111[key][3], i);
		
		//代表一条线
        let seriesObj = {
          name: key,
          type: "line",
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 6, //标记的大小
          itemStyle: {
            normal: {
              color: colorList[i],
            },
          },
          lineStyle: {
            color: colorList[i], //1
          },
          data: obj1111[key][0].map(this.lineUp),
        };
        seriesList.push(seriesObj);

        if (!(!obj1111[key][3])) {
        //代表一个标签
          let seriesObj2 = {
            name: key + "0",
            type: "line",
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 6, //标记的大小
            lineStyle: {
              color: "transparent",
            },
            label: {
              offset: [5, 1],
              color: "#fff",
              show: true,
              position: "right",
              distance: 7.5,
              rotate: 0,
              fontSize: 15,
              verticalAlign: "middle",
              backgroundColor: "#2c95ff",
              borderRadius: [9, 9, 9, 9],
              width: 64,
              height: 26,
              align: "left",
              lineHeight: 17,
              padding: [2, 10, 2, 10],
              formatter: (value) => {
                console.log("value", value);
                let str = obj1111[key][3];
                return str;
              },
            },
            data: [null, null, obj1111[key][0][2]].map(this.lineUp),
          };
          seriesList2.push(seriesObj2);
        }
        i++;
      }
      console.log("seriesList112121212", seriesList, seriesList2, legendData);

      var elementById = document.getElementById("average-score1");
      var myChart = echarts.init(elementById);
      myChart.setOption({
        // title: {
        //   text: "Stacked Line",
        // },
        tooltip: {
          // trigger: "axis",
          trigger: "item",
          formatter: (params, ticket, callback) => {
            // console.log("params", params, obj[params.seriesName][1]);
            let str = ``;
            let index = dataX.indexOf(params.name);
            str =
              params.seriesName +
              `风险<br/>` +
              params.name +
              `年排名第` +
              obj1111[params.seriesName][0][index] +
              `<br/>` +
              `共上报` +
              obj1111[params.seriesName][1][index] +
              `项<br/>`;

            return str;
          },
        },
        color: colorList,
        legend: {
          data: legendData,
          orient: "vertical",
          right: "2%",
          align: "left",
          top: "middle",
          icon: "circle",
          itemWidth: 7,
          itemGap: 10,
        },
        grid: {
          left: "4%",
          right: "35%",
          bottom: "4%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dataX,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
            // lineStyle: {
            //   type: "dotted",
            // },
          },
        },
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            lineStyle: {
              opacity: 0.2,
              type: "dashed",
              color: "#748ca4",
            },
            // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            interval: 1, // 步长
            min: 1, // 起始
            max: 10, // 终止
            axisLabel: {
              fontSize: 14,
              fontFamily: "Alibaba-PuHuiTi-R, Alibaba-PuHuiTi",
              formatter: (value) => {
                console.log("value1", value);
                let str = "";
                if (value == 1) {
                  str = "第十名";
                } else if (value == 2) {
                  str = "第九名";
                } else if (value == 3) {
                  str = "第八名";
                } else if (value == 4) {
                  str = "第七名";
                } else if (value == 5) {
                  str = "第六名";
                } else if (value == 6) {
                  str = "第五名";
                } else if (value == 7) {
                  str = "第四名";
                } else if (value == 8) {
                  str = "第三名";
                } else if (value == 9) {
                  str = "第二名";
                } else if (value == 10) {
                  str = "第一名";
                }
                return str;
              },
            },
          },
        ],
        series: [
          // ----------------
          ...seriesList2,//带标签的
          ...seriesList,//折线
        ],
      });
    },
  },
};
</script>
<style scoped>
.parent {
}
.risk-percent {
  width: 100%;
  height: 300px;
  flex-shrink: 1;
  flex-grow: 1;
  margin-top: 30px;
}
</style>
加蓓努力我先飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts：多组折线-图
qq_41390184的博客
04-10 3622
Echarts是一个功能强大的可视化库，可以用来绘制各种类型的图表。在本文中，我们使用Echarts绘制了一个多组折线图的完整示例，该示例展示了如何准备数据、创建Echarts实例、以及将数据传递给Echarts实例。如果您需要绘制折线图或其他类型的图表，可以考虑使用Echarts。
ECharts折线图中多条折线的展示
weixin_47763287的博客
11-05 4532
1. 打开折线图默认进去只展示一条折线图，其他折线图隐藏，只有用户点击时才可切换其他的折线图。 这里主要是通过selected来设置的（设置false是默认不显示），selected中的数据必须与series中的数据保持一致。 var option = { legend: { x : 'center', borderWidth : '1', selected: { '天数' : false, ..
echart折线图多条线
天天的博客
09-28 1107
echart折线图多条线
Echarts 折线图实现 多条折线
DX奥特曼的博客
11-29 4040
官方例子：Examples - Apache ECharts (incubating)
(代码详解)pyecharts画折线图+多条折线图+参数讲解+美化(有数据)
最新发布
2301_81199775的博客
12-08 7802
(代码详解)pyecharts画折线图+多条折线图+参数讲解+美化(有数据)+数据平滑
echarts多条折线图动态分层的实现方法
10-16
本篇文章主要探讨的是如何在 ECharts 中实现多条折线图的动态分层效果。 首先，ECharts 是百度开发的一个基于 JavaScript 的数据可视化库，它使用 WebGL 和 Canvas 技术，能够高效地处理大量数据并生成交互式图表。...
Echarts动态加载多条折线图的实现代码
10-16
主要介绍了Echarts动态加载多条折线图的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
servlet创建增删该查和servlet实现echarts多条折线图
01-20
实现ECharts多条折线图，开发者需要： 1. 在HTML页面中引入ECharts库的JS文件。 2. 准备数据，这些数据将用于绘制折线图的各个系列。 3. 在JavaScript中初始化ECharts实例，并指定图表的容器元素ID。 4. 配置ECharts...
echarts多个折线图的使用
0月影星云0的博客
07-28 1226
一、如图所示 二、页面引入echarts //引入 echarts 主模块 import * as echarts from 'echarts/lib/echarts'; //引入折线图、柱状图 import 'echarts/lib/chart/line'; import 'echarts/lib/chart/bar'; //引入提示框组件、标题组件、工具箱组件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/t
vue+echarts 多个折线图
weixin_41639609的博客
12-06 1228
多个折线图显示
Echarts+多折现图 完整demo
06-14
echarts多折现图（折线分类）。有不懂可以问我。看到立马回复
Ant Design Charts 折线图配置属性结合案例详细说明
mingwei_zhu的博客
05-12 1万+
最近接手了一个react项目，里面需要用到折线图，看到图表的感觉不难。但是仔细一看引入的是 Ant Design Charts。然后去看了一下文档，发现好多地方的属性与echart区别很大，甚至用法都不一样了。最终结合文档，对属性一 一 试用了解，完成了任务。现给与记录，以便后来再使用方便。 实现目标( UI 给图 ) 现有折线图（ant 基础折线......
echarts折线图多条线时候展示效果不对
浩星
04-03 3734
前言： 在使用echarts折现多跟线图直接用官方案例的时候，会遇到一个特别坑的问题，就是数据和绘制图对不上的问题： 效果图： 解决办法：把这个stack去掉 ...
vue + echarts 多条折线图
这是我的博客
05-06 7983
html： <!-- 折线图--> <div id="myChart1"/> js： // 折线图 getLine () { // 基于准备好的dom，初始化echarts实例 let myChart1 = echarts.init(document.getElementById('myChart1')); /...
ECharts 多个折线图动态获取json数据
书写人生
11-23 5724
ECharts 多个折线图动态获取json数据 效果图如下： 一.html部分 二.js部分 function loadTwoLine() {     var myChart = echarts.init(document.getElementById('TwoLineChart'));     // 显示标题，图例和空的坐标轴    
Echarts动态加载折线图X Y轴数据图表数据
热门推荐
Curtain的博客
08-14 3万+
Echarts使用及动态加载图表数据 折线图X轴数据动态加载
全动态基于echarts 多条折线图
海北军
03-19 607
<template> <div :ref=refId style='width:100%;height:300px'></div> </template> <script> import echarts from 'echarts'; export default { name: 'Chartline', pr...
echarts 多条折线图数据解析
10-18
ECharts 是一个基于 JavaScript 的开源可视化库，可以用来制作各种类型的图表，包括折线图。多条折线图数据解析的过程与单条折线图类似，只是需要处理多组数据。 在 ECharts 中，多条折线图的数据格式通常是一个数组，数组中的每个元素代表一条折线的数据。每个元素都是一个对象，包含了该条折线的名称和数据。例如： ```javascript [ { name: '折线1', data: [10, 20, 30, 40, 50] }, { name: '折线2', data: [20, 30,40, 50, 60] }, { name: '折线3', data: [30, 40, 50, 60, 70] } ] ``` 其中，`name` 表示该条折线的名称，`data` 表示该条折线的数据。在 ECharts 中，可以通过配置项来设置多条折线图的样式、颜色等属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值