橙子
  • 2
  • 新人请关照

echarts4的代码在项目中画不出来,在官网却是好的,为什么呢???

用的是echarts是4.2.1的版本

如果dataset中的dimensions是["create_date4", "a", "b", "c", "d"]就可以,但是如果是["create_date4", "2", "3", "4", "5"]就不行了,而且当鼠标移到图表时,报错的是:

image.png
这个poly.js不是我写的

相关代码

{

    tooltip: {
      trigger: "axis"
    },
    legend: {
      bottom: 0,
      itemGap: 16,
      textStyle: {
        color: "#fff",
        fontWeight: "400",
        fontSize: 12
      },
      itemWidth: 8,
      itemHeight: 8
    },
    tooltip: {
      trigger: "axis",
      confine: true, //是否将 tooltip 框限制在图表的区域内
      axisPointer: {
        // 坐标轴指示器,坐标轴触发有效
        type: "line" // 默认为直线,可选为:'line' | 'shadow'
      },
      formatter: ""
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      },
      axisLabel: {
        interval: 0,
        rotate: 20,
        fontSize: 12,
        fontWeight: "100"
      }
    },
    yAxis: {
      type: "value",
      nameTextStyle: { color: "red" },
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      },
      splitLine: {
        lineStyle: { color: "rgba(200,200,200,0.2)" }
      },
      axisLabel: {
        interval: 0,
        fontSize: 12,
        fontWeight: "100"
      }
    },
    dataset: {
      dimensions: ["create_date4", "2", "3", "4", "5"],
      source: [
        {
          2: "1662504",
          3: "1425003",
          4: "1187503",
          5: "1425003",
          create_date4: "2019-01"
        },
        {
          2: "1694773",
          3: "5589824",
          4: "8217694",
          5: "1114831",
          create_date4: "2019-02"
        },
        {
          2: "3583353",
          3: "9750394",
          4: "1952266",
          5: "2356107",
          create_date4: "2019-03"
        }
      ]
    },
    series: [
      {
        isSlideDown: true,
        symbol: "circle",
        type: "line",
        itemStyle: {
          normal: {
            color: "#2BD1C0"
          }
        }
      },
      {
        isSlideDown: true,
        symbol: "circle",
        type: "line",
        itemStyle: {
          normal: {
            color: "#8B48EF"
          }
        }
      },
      {
        isSlideDown: true,
        symbol: "circle",
        type: "line",
        itemStyle: {
          normal: {
            color: "#FEDB65"
          }
        }
      },
      {
        isSlideDown: true,
        symbol: "circle",
        type: "line",
        itemStyle: {
          normal: {
            color: "#FEDB65"
          }
        }
      }
    ]
  };

项目中画出来的:
image.png
相同代码在官网中是:
image.png,
而且如果我把dataset的数据改成下面这样,仅仅是把2,3,4,5改成了a,b,c,d

相关代码

    dataset: {
      dimensions: ["create_date4", "2", "3", "4", "5"],
      source: [
        {
          2: "1662504",
          3: "1425003",
          4: "1187503",
          5: "1425003",
          create_date4: "2019-01"
        },
        {
          2: "1694773",
          3: "5589824",
          4: "8217694",
          5: "1114831",
          create_date4: "2019-02"
        },
        {
          2: "3583353",
          3: "9750394",
          4: "1952266",
          5: "2356107",
          create_date4: "2019-03"
        }
      ]
    }
    这样可以画的出来

由于官网的背景板是白色的,所以仅仅只改了一下刻度的颜色而已。

我希望能正常画出来。

阅读 208
评论
    3 个回答
    橙子
    • 2
    • 新人请关照

    不好意思,给各位填麻烦了,是版本的问题,我升级了一下echarts的版本,就显示正常了。

    评论 赞赏

      这个很明显是哪个数组出错了,你看一下用 [0] 取值的那个数组有没有问题

      评论 赞赏
        Dopp
        • 1.1k

        clipboard.png
        我用你最上面那段代码是可以画出来的,你看看代码还有哪些内容?

        评论 赞赏
          撰写回答

          登录后参与交流、获取后续更新提醒