周销量可拖动ECharts Gallery

20:11:45图表已生成
代码
 var xData = (function () {
        var data = [];
        for (var i = 1; i <= 52; i++) {
          data.push("第" + i + "周");
        }
        return data;
      })();

      // 遍历月份
      var salesWeekStr = "";
      for (let k = 1; k <= 52; k++) {
        salesWeekStr += "第" + k + "周,";
      }
      var alesWeekData = salesWeekStr.substring(0, salesWeekStr.lastIndexOf(",")).split(",");

      option = {
        toolbox: {
          // 工具栏
          itemSize: 20,
          showTitle: false,
          top: 10,
          right: 12,
          feature: {
            myTool: {
              //自定义工具 myTool
              show: true,
              title: "全屏显示",
              icon: "image://" + "images/full.png", //此处 图片路径前面必须加字符串  "image://"
              onclick: function () {
                //生成全屏显示的图表
                if (setFullScreenToolBox(optionSalesBottom1)) {
                  getChartData(chartScreen);
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 12,
          },
          position: "inside",
        },
        title: {
          text: "周日均销量",
          left: "10",
          top: "5",
          textStyle: {
            fontSize: 12,
            fontWeight: "bold",
            color: "#0ab7ff",
          },
          subtext: "单位:万元",
          subtextStyle: {
            lineHeight: 1,
            fontSize: 9,
            color: "#0ab7ff",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "30",
          top: "25%",
          containLabel: true,
        },
        legend: {
          data: ["2019日均销量", "2020日均销量"],
          top: 5,
          textStyle: {
            fontSize: 10,
            color: "#0ab7ff",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            // boundaryGap: false,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              // rotate: 35,
              // formatter: function (value) {
              //       //x轴的文字改为竖版显示
              //       var str = value.split("");
              //       return str.join("\n");
              //     },
              textStyle: {
                fontSize: 10,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0ab7ff",
                fontSize: 8,
              },
            },
            axisTick: {
                alignWithLabel: true
            }
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                fontSize: 8,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0ab7ff",
              },
            },
          },
        ],

        dataZoom: [
          {
            show: true,
            height: 20,
            xAxisIndex: [0],

            bottom: 6,
            // start: 0,//数据窗口范围的起始百分比
            // end: 50,//数据窗口范围的结束百分比
            startValue: 0,
            endValue: 11, //初始显示1-12周
            // handleIcon: 'path://M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z',//拖动按钮图形-默认
            handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", //拖动按钮图形-矩形
            // handleIcon: 'image://images/echartmap-bg4.png',//自定义图形
            // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',//拖动按钮图形-猪
            handleSize: "120%", //拖动按钮大小
            fillerColor: "#025bb2",
            handleStyle: {
              color: "#0ab7ff", //拖动按钮颜色
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#0559ab",
          },
        ],
            series: [
            {
              name: "2019日均销量",
              type: "line",
              color: "#e5bd00",

              label: {
                        position: 'left',
                        show: true,
                        color: '#e5bd00',
                        offset:[0,-8],//偏移量
                        fontSize:8,
                        // lineHeight:10,
                        // backgroundColor: '#a93f56',
                        // padding:[5,5,2,5],
                        zlevel:9,
                        // borderRadius:5
                        
                    },
              data: [21517.47, 8833.02, 15852.86, 16171.63, 17335.13, 17997.83, 17627.1, 17293.01, 17871.43, 14938.53, 19547.43, 21284.8],
            },
           
            {
              name: "2020日均销量",
              type: "line",
              label: {
                        position: 'right',
                        show: true,
                        color: '#a93f56',
                        offset:[0,-12],//偏移量
                        fontSize:8,
                        // lineHeight:10,
                        // backgroundColor: '#a93f56',
                        // padding:[5,5,2,5],
                        // zlevel:9,
                        // borderRadius:5
                        
                    },
              color: "#a93f56",
              data: [13491.22, 0, 8499.88, 17786.13, 3422.57,],
            },
            {
              name: "2020日均销量",
              type: "line",

              label: {
                        position: 'right',
                        show: true,
                        color: 'gray',
                        offset:[0,-12],//偏移量
                        fontSize:8,
                        // lineHeight:10,
                        // backgroundColor: '#a93f56',
                        // padding:[5,5,2,5],
                        // zlevel:9,
                        // borderRadius:5
                        
                    },
              color: "gray",
              data: ["", "-", "-", "-",3422.57,20000, 21000, 22000,23000,24000,25000,26000], //前面第一段最后一个值要显示在这
              itemStyle: {
                //虚线样式
                normal: {
                  lineStyle: {
                    width: 2,
                    color: "gray",
                    type: "dotted", //'dotted'虚线 'solid'实线
                  },
                },
              },
            }
          ],
      
      };

   
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
