Echarts在线免费图表

 
            var echartData = [40, -8, -20, 30, -10, 25,40, -8, -20, 30, -10, 25];
var seriesData = echartData.map((item, index) => {
  return {
    ...item,
    value: item,
    itemStyle: {
      borderRadius: item > 0 ? [50, 50, 0, 0] : [0, 0, 50, 50],
    },
  };
});
option = {
  backgroundColor: "#fff",
  grid: {
    top: "15%",
    right: "10%",
    left: "10%",
    bottom: "12%",
  },
  xAxis: [
    {
      type: "category",
      data: ["2019Q1", "2019Q2", "2019Q3", "2019Q4", "2019Q5", "2019Q6","2019Q1", "2019Q2", "2019Q3", "2019Q4", "2019Q5", "2019Q6"],
      axisLabel: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#E6E6E6",
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      axisLabel: {
        formatter: "{value}%",
        color: "#999",
        textStyle: {
          fontSize: 12,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(107,107,107,0.37)",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#F0F0F0",
        },
      },
    },
  ],
  series: [
    {
      type: "bar",
      data: seriesData,
      barWidth: "20px",
      itemStyle: {
        normal: {
          color: function (params) {
            console.log(seriesData);
            let colorArr =
              params.value > 0 ? ["#FF5F47", "#fff"] : ["#fff", "#21CC88"];
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: colorArr[0], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: colorArr[1], // 100% 处的颜色
                },
              ],
              false
            );
          },
        },
      },
    },
    {
      data: [10, 18, 15, 20, 16, 10,10, 18, 15, 20, 16, 10],
      type: "line",
      smooth: true,
      name: "折线图",
      symbol: "none",
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(43, 218, 230, 0.4)",
          },
          {
            offset: 1,
            color: "rgba(79, 250, 227, 0)",
          },
        ]),
      },
      itemStyle: {
        normal: {
          lineStyle: {
            color: "rgba(60, 185, 226, 1)",
          },
        },
      },
    },
  ],
};