echarts常见图形-折线图(三)

1.最终效果图

2.echarts文件(ndfx.js)

import echarts from "echarts";
export let ndfxOption = (xData, sData_shengjsf, sData_shijsf, sData_xianjsf) => {
  //   let xData = ["2015", "2016", "2017", "2018", "2019", "2020"];
  //   let sData_shengjsf = [213, 123, 562, 313, 152, 631, 732];
  //   let sData_shijsf = [510, 311, 270, 380, 421, 554, 652];
  //   let sData_xianjsf = [213, 213, 521, 423, 631, 311, 211];
  let option = {
    title: {
      show: false,
      text: "收支趋势分析",
      textStyle: {
        fontSize: 12,
        fontWeight: 400
      },
      left: "center",
      top: "10%"
    },
    grid: {
      top: "10%",
      left: "15%",
      right: "10%",
      bottom: "16%"
    },
    legend: {
      show: true,
      icon: "roundRect", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
      top: "1%",
      right: "5%",
      itemWidth: 6,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: "#21cbe7"
      }
    },
    tooltip: {
      trigger: "axis",
      // formatter: function(param) {
      //   return '<em style="color:#ffffff;">' + param.value + "</em> ";
      // },
      axisPointer: {
        label: {
          //鼠标划过x轴标题是否选中
          show: false,
          backgroundColor: "#fff",
          color: "#556677",
          borderColor: "rgba(0,0,0,0)",
          shadowColor: "rgba(0,0,0,0)",
          shadowOffsetY: 0
        },
        lineStyle: {
          //鼠标划过竖线的颜色
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00d2f3"
              },
              {
                offset: 0.5,
                color: "#00d2f3"
              },
              {
                offset: 1,
                color: "#00d2f3"
              }
            ],
            global: false
          }
        }
      },
      backgroundColor: "#242a32", //内容框背景颜色
      textStyle: {
        color: "#fff" //内容框字体颜色
      },
      padding: [10, 10],
      extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        axisLine: {
          lineStyle: {
            color: "#166187" //x轴颜色
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#59c9f9" //坐标轴字颜色
          },
          margin: 15
        },
        axisPointer: {
          label: {
            padding: [11, 5, 7],
            backgroundColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#fff" // 0% 处的颜色
                },
                {
                  offset: 0.9,
                  color: "#fff" // 0% 处的颜色
                },
                {
                  offset: 0.9,
                  color: "#33c0cd" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#33c0cd" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        boundaryGap: false
      }
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 4,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#166187" //y轴颜色
          }
        },
        axisLabel: {
          textStyle: {
            color: "#59c9f9"
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#115080",
            width: "0.5",
            type: "dashed",
            opacity: "0.5"
          }
        }
      }
    ],
    series: [
      {
        name: "省级示范",
        type: "line",
        data: sData_shengjsf,
        symbolSize: 1,
        symbol: "circle",
        smooth: true, //是否是平滑曲线
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          //线条颜色
          width: 0.5,
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: "#00d6f8"
            },
            {
              offset: 1,
              color: "#00d6f8"
            }
          ])
          // shadowColor: 'rgba(115,221,255, 0.3)',
          // shadowBlur: 10,
          // shadowOffsetY: 20
        },
        // areaStyle: {
        //   // 区域渐变阴影
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(
        //       0,
        //       0,
        //       0,
        //       1,
        //       [
        //         {
        //           offset: 0,
        //           color: "#0c386b"
        //         },
        //         {
        //           offset: 1,
        //           color: "#083b5b"
        //         }
        //       ],
        //       false
        //     )
        //     // shadowColor: "rgba(108,80,243, 0.9)",//阴影
        //     // shadowBlur: 20
        //   }
        // },
        itemStyle: {
          normal: {
            color: "#00d6f8", //legend方块颜色和对应圆圈颜色
            borderColor: "#00d6f8" //对应圆圈边框颜色
          }
        }
      },
      {
        name: "市级示范",
        type: "line",
        data: sData_shijsf,
        symbolSize: 1,
        symbol: "circle",
        smooth: true, //是否是平滑曲线
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          //线条颜色
          width: 0.5,
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: "#2970ff"
            },
            {
              offset: 1,
              color: "#2970ff"
            }
          ])
          // shadowColor: 'rgba(115,221,255, 0.3)',
          // shadowBlur: 10,
          // shadowOffsetY: 20
        },
        // areaStyle: {
        //   // 区域渐变阴影
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(
        //       0,
        //       0,
        //       0,
        //       1,
        //       [
        //         {
        //           offset: 0,
        //           color: "#0c386b"
        //         },
        //         {
        //           offset: 1,
        //           color: "#083b5b"
        //         }
        //       ],
        //       false
        //     )
        //     // shadowColor: "rgba(108,80,243, 0.9)",//阴影
        //     // shadowBlur: 20
        //   }
        // },
        itemStyle: {
          normal: {
            color: "#2970ff", //legend方块颜色和对应圆圈颜色
            borderColor: "#2970ff" //对应圆圈边框颜色
          }
        }
      },
      {
        name: "县级示范",
        type: "line",
        data: sData_xianjsf,
        symbolSize: 1,
        symbol: "circle",
        smooth: true, //是否是平滑曲线
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          //线条颜色
          width: 0.5,
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: "#f5c402"
            },
            {
              offset: 1,
              color: "#f5c402"
            }
          ])
          // shadowColor: 'rgba(115,221,255, 0.3)',
          // shadowBlur: 10,
          // shadowOffsetY: 20
        },
        // areaStyle: {
        //   // 区域渐变阴影
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(
        //       0,
        //       0,
        //       0,
        //       1,
        //       [
        //         {
        //           offset: 0,
        //           color: "#0c386b"
        //         },
        //         {
        //           offset: 1,
        //           color: "#083b5b"
        //         }
        //       ],
        //       false
        //     )
        //     // shadowColor: "rgba(108,80,243, 0.9)",//阴影
        //     // shadowBlur: 20
        //   }
        // },
        itemStyle: {
          normal: {
            color: "#f5c402", //legend方块颜色和对应圆圈颜色
            borderColor: "#f5c402" //对应圆圈边框颜色
          }
        }
      }
    ]
  };
  return option;
};

3.vue文件中

3.1 html

<div style="width:30vh;height:30vh;" ref="ndfxChart"></div>

3.2 js逻辑处理(引入ncplxfx.js)

<script>
	import { ndfxOption } from "@/assets/js/xxjyzt/ndfx"; //年度分析
	export default {
		data(){},
		methods: {
			// 年度分析
		    ndfx() {
		      let xData = ["2015", "2016", "2017", "2018", "2019", "2020"];
		      let sData_shengjsf = [213, 123, 562, 313, 152, 631, 732];
		      let sData_shijsf = [510, 311, 270, 380, 421, 554, 652];
		      let sData_xianjsf = [213, 213, 521, 423, 631, 311, 211];
		      let ndfxChartEle = this.$echarts.init(this.$refs.ndfxChart);
		      ndfxChartEle.setOption(ndfxOption(xData, sData_shengjsf, sData_shijsf, sData_xianjsf));
		    },
			// 初始化图形
    		initEcharts() {
				let ndfxChartEle = this.$echarts.init(this.$refs.ndfxChart); //年度分析
				window.addEventListener("resize", function() {
			        ndfxChartEle.resize(); //年度分析
			    });
			}
		},
		mounted() {
			this.ndfx(); //年度分析
			this.initEcharts();
		}
	}
</script>