参考echarts官方示例

下载安装

npm i echarts

导入

import Echarts from 'echarts';
//引入主题
import 'echarts/theme/shine.js';

图表初始化

  let echartsInstance = Echarts.init(
    document.getElementById(divId, "shine");
  );
  echartsInstance.setOption(option, true);
  window.addEventListener("resize", function () {
    echartsInstance.resize();
  });

常用图表基础配置

通过type设置，折线图为line，柱状图为bar

• 折线图

var option = {
  title: {
    text: "堆叠区域图"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      areaStyle: {}
    }
  ]
};

• 柱状图

var dataAxis = ["点","击","柱","子","或","者","两","指","在","触","屏","上","滑","动","能","够","自","动","缩","放"];
var data = [220,182,191,234,290,330,310,123,442,321,90,149,210,122,133,34,198,123,125,220];
var yMax = 500;
var dataShadow = [];

for (var i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}

option = {
  title: {
    text: "特性示例：渐变色 阴影 点击缩放",
    subtext: "Feature Sample: Gradient Color, Shadow, Click Zoom"
  },
  xAxis: {
    data: dataAxis,
    axisLabel: {
      inside: true,
      textStyle: {
        color: "#fff"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: "#999"
      }
    }
  },
  dataZoom: [
    {
      type: "inside"
    }
  ],
  series: [
    {
      // For shadow
      type: "bar",
      itemStyle: {
        color: "rgba(0,0,0,0.05)"
      },
      barGap: "-100%",
      barCategoryGap: "40%",
      data: dataShadow,
      animation: false
    },
    {
      type: "bar",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#83bff6" },
          { offset: 0.5, color: "#188df0" },
          { offset: 1, color: "#188df0" }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#2378f7" },
            { offset: 0.7, color: "#2378f7" },
            { offset: 1, color: "#83bff6" }
          ])
        }
      },
      data: data
    }
  ]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on("click", function(params) {
  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  myChart.dispatchAction({
    type: "dataZoom",
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue:
      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  });
});

常用颜色渐变设置

• 从下到上渐变
  方式一：

// 从下到上渐变
  colorLinearGradientFromBottom(fromColor, toColor) {
    return new Echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: fromColor // 0% 处的颜色
    }, {
      offset: 1,
      color: toColor // 100% 处的颜色
    }], false)
  }

方式二：

colorLinearGradientFromBottom2(fromColor, toColor) {
    return {
      type: "linear",
      x: 0,
      y: 1,
      x2: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: fromColor // 0% 处的颜色
        },
        {
          offset: 1,
          color: toColor // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    };
  }

• 从左到右渐变
  方式一：

// 从左到右渐变
  colorLinearGradientFromLeft(fromColor, toColor) {
    return new Echarts.graphic.LinearGradient(0, 0, 1, 0, [{
      offset: 0,
      color: fromColor // 0% 处的颜色
    }, {
      offset: 1,
      color: toColor // 100% 处的颜色
    }], false)
  }

方式二：

colorLinearGradientFromLeft2(fromColor, toColor) {
    return {
      type: "linear",
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: fromColor // 0% 处的颜色
        },
        {
          offset: 1,
          color: toColor // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    };
  }

option中常用参数设置

1. 图表位置设置，利用grid参数

    grid: {
        top: '20',
        right: '20',
        left: '50%',
        bottom: '10%',
        containLabel: true
      }

取值可以是固定值，也可以是百分比。

2. 鼠标悬停提示框设置，利用tooltip参数

tooltip: {
  trigger: "axis",
  axisPointer: {
    type: "line",
    crossStyle: {
      lineColor: "#fff"
    }
  }
}

3. 图表x轴设置，利用xAxis参数

xAxis: [
  {
    type: "category",
    boundaryGap: false,
    color: "#59588D",
    axisPointer: {
      lineStyle: {
        color: "#004E52",
        opacity: 0.5,
        width: 2
      },
      label: {
        show: true,
        formatter: function(params) {
          return echarts.format.formatTime("yyyy-MM-dd", params.value);
        },
        backgroundColor: "#004E52"
      }
    },
    // 刻度线颜色设置
    axisLine: {
      lineStyle: {
        color: "#ccc" // 颜色
      }
    },
    axisLabel: {
      // interval: 0, //坐标刻度之间显示间隔
      color: "white", //刻度值字体颜色设置
      formatter: "{value} m", //加单位显示
      rotate: 30 //旋转角度
    },
    //x轴线不显示
    splitLine: {
      show: false
    },
    data: axis
  }
];

4. 图表y轴设置，利用yAxis参数

• 单个坐标轴参数设置

yAxis: [
  {
    name: "当前水位",
    type: "value",
    // 坐标轴放置位置
    position: "right",
    min: parseInt(min) - 5,
    max: parseInt(max) + 5,
    // 坐标轴线设置，不显示
    splitLine: {
      show: false
    },
    splitArea: { show: false },
    // 坐标轴颜色设置
    axisLine: {
      lineStyle: {
        color: "#face5a"
      }
    }
  }
]

• 多个坐标轴参数设置，重点在位置position设置

yAxis: [
  {
    name: "当前水位",
    nameTextStyle: {
       color: "white"
    },
    type: "value",
    position: "right",
    min: parseInt(min) - 5,
    max: parseInt(max) + 5,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: "#face5a"
      }
    }
  },
  {
    name: "超过人工溢流底板高程(m)",
    type: "value",
    nameTextStyle: {
       color: "white"
    },
    position: "left",
    min: 0,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: "#3ae7c4"
      }
    }
  },
  {
    name: "标准水位(m)",
    type: "value",
    position: "right",
    offset: 60, // 坐标轴偏移量
    min: parseInt(min) - 5,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: "#00aeff"
      }
    }
  }
]

nameTextStyle: 坐标轴名称的文字样式

• color: 坐标轴名称的颜色，默认取 axisLine.lineStyle.color

5. 显示数据设置，利用series参数

• 单个折线图设置

series: [
  {
    name: "入库流量",
    type: "line",
    yAxisIndex: 0, // 第几个Y轴 索引值
    smooth: true, //曲线平滑
    symbol: "emptyCircle", // 设置拐点形状
    symbolSize: 10, //设置拐点大小
    //showAllSymbol: true,
    itemStyle: {
      normal: {
        // 折线颜色设置
        color: this.colorLinearGradientFromLeft(
          lineStyleRgb["黄"][0],
          lineStyleRgb["黄"][1]
        ),
        // 折线面积背景颜色设置
        areaStyle: {
          type: "default",
          color: this.colorLinearGradientFromBottom(
            shadowStyleRgb["黄"][0],
            shadowStyleRgb["黄"][1]
          )
        }
      }
    },
    // 数据赋值
    data: inFloatTotalData
  }
]

参数symbol:，默认取值:emptyCircle,还可以取值circle, rect, roundRect, triangle, diamond, pin, arrow, none

• 多个折线图设置，通过yAxisIndex参数确定设置的轴线样式

series: [
  {
    name: "超过人工溢流底板高程",
    type: "line",
    yAxisIndex: 1, // 第几个Y轴 索引值
    smooth: true, //曲线平滑
    itemStyle: {
      normal: {
        color: this.LinearGradientLine("#3ae7c4", "#1972cd"),
        areaStyle: {
          type: "default",
          origin: "end",
          color: this.areaStyleColor(
            areaStyleRgb["蓝"][0],
            areaStyleRgb["蓝"][1]
          )
        }
        //以及在折线图每个日期点顶端显示数字
        // label: {
        //         show: true,
        //         position: 'top',
        //         textStyle: {
        //           color: 'white'
        //     }
        // }
      }
    },
    // areaStyle : {},
    data: data2
  },
  {
    name: "标准水位",
    type: "line",
    yAxisIndex: 2, // 第几个Y轴 索引值
    smooth: true, //曲线平滑
    itemStyle: {
      normal: {
        color: this.LinearGradientLine("#00aeff", "#4552fc"),
        areaStyle: {
          type: "default",
          origin: "end",
          color: this.areaStyleColor(
            areaStyleRgb["蓝"][0],
            areaStyleRgb["蓝"][1]
          )
        }
      }
    },
    data: data3
  }
]

• 单个柱状图设置

series: [
  {
    type: "bar",
    data: pData,
    barWidth: "40px",
    itemStyle: {
      normal: {
        color: params => {
          var colorList = this.colorListInit(pData);
          return colorList[params.dataIndex];
        }
      }
    }
  }
]

当柱状图中需根据不同取值设置不同颜色时，color中设置为函数形式，利用参数params中的params.dataIndex，通过颜色遍历，指定对应的颜色

colorListInit(pData) {
  let pColorList = pData.map((item, index) => {
    return this.colorLinearGradientFromBottom(
      lineStyleRgb[colorArray[index]][0],
      lineStyleRgb[colorArray[index]][1]
    );
  });
  return pColorList;
},
// 从下到上渐变
colorLinearGradientFromBottom(fromColor, toColor) {
  return new Echarts.graphic.LinearGradient(
    0,
    1,
    0,
    0,
    [
      {
        offset: 0,
        color: fromColor // 0% 处的颜色
      },
      {
        offset: 1,
        color: toColor // 100% 处的颜色
      }
    ],
    false
  );
}

• 多个柱状图设置

series: [
  {
    name: legend[0],
    type: "bar",
    data: seriesData[legend[0]],
    /* barWidth: 10, //柱子宽度
          barGap: 1, //柱子之间间距 */
    itemStyle: {
      normal: {
        barBorderRadius: 5,
        color: this.colorGradient(colorList["黄"][0], colorList["黄"][1]),
        opacity: 1,
        shadowBlur: 13,
        shadowColor: " rgba(132,208,55,0.38)",
        shadowOffsetX: 0,
        shadowOffsetY: 0
      }
    }
  },
  {
    name: legend[1],
    type: "bar",
    data: seriesData[legend[1]],
    /* barWidth: 10,
          barGap: 1, */
    itemStyle: {
      normal: {
        barBorderRadius: 5,
        color: this.colorGradient(colorList["橙"][0], colorList["橙"][1]),
        opacity: 1,
        shadowBlur: 13,
        shadowColor: " rgba(252,113,25,0.38)",
        shadowOffsetX: 0,
        shadowOffsetY: 0
      }
    }
  }
]

• 图表标线的设置，利用markLine参数
  a. 平行于Y轴趋势线

series: [
  {
    name: "平行于Y轴趋势线",
    type: "line",
    markLine: {
      data: [[{ coord: ["今天", 0] }, { coord: ["今天", 1000] }]]
    }
  },
  //以左轴为基准
  {
    name: "1",
    type: "line",
    yAxisIndex: 0, //以左轴为基准
    data: [700, 700, 700, 700, 700, 700, 700],
    lineStyle: {
      width: 2
    },
    symbolSize: 6,
    itemStyle: {
      normal: {
        color: Common.LinearGradientLine("#ff8e78", "#fc4545")
      }
    },
    areaStyle: {
      color: Common.areaStyleColor(
        Common.areaStyleRgb["xxsw"][1],
        Common.areaStyleRgb["xxsw"][0]
      )
    }
  },
  //以右轴为基准
  {
    name: "3",
    type: "line",
    yAxisIndex: 1, //以右轴为基准
    symbolSize: 6,
    data: [null, null, null, null, 10, 30, 80],
    lineStyle: {
      // type: 'dotted',
      // color: 'green',
      width: 2
    },
    itemStyle: {
      normal: {
        color: Common.LinearGradientLine("#f0ff00", "#4abd04")
      }
    },
    areaStyle: {
      color: Common.areaStyleColor(
        Common.areaStyleRgb["ycsw"][1],
        Common.areaStyleRgb["ycsw"][0]
      )
    }
  }
]

x轴标线.png

b. 平行于X轴趋势线

// 分别在Y值50/100/150/200/300处显示趋势线
series: {
  name: "Beijing AQI",
  type: "line",
  data: data.map(function(item) {
    return item[1];
  }),
  markLine: {
    silent: true,
    data: [
      {
        yAxis: 50
      },
      {
        yAxis: 100
      },
      {
        yAxis: 150
      },
      {
        yAxis: 200
      },
      {
        yAxis: 300
      }
    ]
  }
}

y轴标线.png

6. 图例legend设置

• 一般参数设置

legend: {
  data: ["入库流量", "出库流量", "库水位"],
  textStyle: {
    color: "white"
  },
  left: "right"
}

• 较完整参数设置

legend: {
    data: legend, //['2005', '2008', '2010', '2013', '2017'],
    /* align: 'right',
    right: 0, */
    bottom: 0,
    textStyle: {
      color: "#979797"
    },
    //orient: 'vertical',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 15
  }