
- initChartsBox() {
- this.option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- // 方法一
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- shadowStyle: {
- color: "rgba(41, 95, 204, 0.2)",
- },
- },
- borderColor: "rgba(0, 170, 255)", // 边框颜色
- }, // 坐标轴指示器配置
- textStyle: {
- color: "#333", // xy轴的提示文字颜色,不包含背景刻度线
- },
- color: ["#1492FF"],
- grid: {
- top: "25px",
- left: "50px",
- right: "20px",
- bottom: "35px",
- },
- xAxis: [
- {
- type: "category",
- data: this.chartsData.time,
- axisLine: {
- show: true,
- lineStyle: {
- color: "#004080",
- // width: 0,
- // type: "solid",
- }, // x轴线的颜色以及宽度
- },
- // axisLabel: {
- // show: true,
- // textStyle: {
- // color: "rgba(255, 255, 255, 0.3)",
- // }
- // }, // x轴文字的配置
- splitLine: {
- show: false,
- lineStyle: {}, // 分割线配置
- },
- axisTick: {
- show: false,
- }, // x轴的刻度线
- },
- ],
- yAxis: [
- {
- type: "value",
- splitLine: {
- show: true,
- lineStyle: {
- color: "#333",
- opacity: 0.1,
- }, // 设置横向的线的颜色
- },
- axisLabel: {
- show: true,
- margin: 20,
- // textStyle: {
- // color: "rgba(255, 255, 255, 0.3)",
- // }, // y轴的字体配置
- },
-
- splitArea: {
- show: true,
- areaStyle: {
- color: [
- 'rgba(21, 190, 80, 0.1)',
- 'rgba(109, 217, 147, 0.1)',
- 'rgba(245, 221, 102, 0.11)',
- 'rgba(255, 107, 0, 0.1)',
- 'rgba(212, 0, 0, 0.1)',
- ]
- }
- }
-
- },
- ],
- series: [
- {
- data: this.chartsData.roadNorm,
- type: "line",
- smooth: true,
- symbolSize: 0, // 设置圆点大小为 0,即不显示圆点
- },
- ],
- };
- this.myChart = this.$echarts.init(document.getElementById("chartsBox")); // 图标初始化
- this.myChart.setOption(this.option); // 渲染页面
- var that = this;
- let index = 0;
- this.eChartsTimer = setInterval(function () {
- let len = that.chartsData.time.length;
- if (index >= len) {
- index = 0;
- }
- that.myChart.dispatchAction({
- type: "showTip", // 提示框
- seriesIndex: 0,
- dataIndex: index, // 第 lightIndex 柱子高亮
- });
- index += 1
- }, 1000);
-
- /* ECharts动态效果 */
- window.addEventListener("resize", () => {
- this.myChart.resize();
- });
- },