G2折线图配置

import * as G2 from "@antv/g2";
export default {
  data() {
    return {
      lineData: [
        {year:2013,type:"食品烟酒",value:7,},{year:2013,type:"衣着",value:7,},
        {year:2013,type:"居住",value:9,},{year:2013,type:"生活用品",value:6,},
        {year:2013,type:"交通通行",value:7,},{year:2013,type:"文教娱",value:9,},
        {year:2013,type:"医疗保健",value:2,},{year:2013,type:"其他",value:35,},
        {year:2014,type:"食品烟酒",value:4,},{year:2014,type:"衣着",value:9,},
        {year:2014,type:"居住",value:32,},{year:2014,type:"生活用品",value:9,},
        {year:2014,type:"交通通行",value:9,},{year:2014,type:"文教娱",value:6,},
        {year:2014,type:"医疗保健",value:5,},{year:2014,type:"其他",value:5,},
        {year:2015,type:"食品烟酒",value:14,},{year:2015,type:"衣着",value:4,},
        {year:2015,type:"居住",value:19,},{year:2015,type:"生活用品",value:1,},
        {year:2015,type:"交通通行",value:7,},{year:2015,type:"文教娱",value:23,},
        {year:2015,type:"医疗保健",value:5,},{year:2016,type:"食品烟酒",value:10,},
        {year:2015,type:"其他",value:9,},{year:2016,type:"衣着",value:12,},
        {year:2016,type:"居住",value:5,},{year:2016,type:"生活用品",value:10,},
        {year:2016,type:"交通通行",value:3,},{year:2016,type:"文教娱",value:12,},
        {year:2016,type:"医疗保健",value:13,},{year:2016,type:"其他",value:14,}
       ],
       linePlot:null,
    };
  },
  mounted() {
    this.lineChart();
    this.getData();
  },
  methods: {
    //关于更新数据 组件重载  --start---
  	  //获取数据
  	  getData(){
     	.get("http://",'post')
       .then(res){
       		this.lineData = res.data;
       		this.changeLine();
       }
     },
    changeLine(){
      this.linePlot.changeData(this.lineData)
    },
    //关于更新数据 组件重载  --end---
    lineChart() {
      const that = this;
      this.linePlot = new G2.Chart({//实例化只能有一次
        container: "lineC",
        padding: [40, 30, 30, 50],
        autoFit: true,
        //width: window.innerWidth - 200,
        height: 400,
      });
      //设置Y轴最大最小值
      this.linePlot.scale("value", {
        min: 0,
        max: 100,
      });
      this.linePlot.tooltip({
        shared: true,
        //辅助线
        showCrosshairs: true,
        crosshairs: {
        	// type: 'rect' || 'x' || 'y' || 'cross',
          // rect 表示矩形框，x 表示水平辅助线，y 表示垂直辅助线，cross 表示十字辅助线
          type: "x",
        },
        // crosshairs: {
        //     style: {
        //         // 图形样式
        //         fill: "#000", // 填充的颜色
        //         stroke: "#000", // 边框的颜色
        //         strokeOpacity: 0.5, // 边框颜色的透明度，数值为 0 - 1 范围
        //         fillOpacity: 0.5, // 填充的颜色透明度，数值为 0 - 1 范围
        //         lineWidth: 0.5, // 边框的粗细
        //         lineDash: 10 // 线的虚线样式
        //     }
        // },
        
      });
      this.linePlot.legend({
        position: "top left",
      });
      this.linePlot.data(that.lineData);
      this.linePlot.axis("value", {
        label: {
          textStyle: {
            fill: "#aaaaaa",
          },
          formatter: function formatter(text) {
            let str = text;
            if (Number(str) >= 1000) {
              str = Number(text) / 1000 + "K";
            }
            return str;
          },
        },
      });
      //断点连接
      this.linePlot
        .line({
          connectNulls: true, // 配置，连接空值数据
        })
        .position("day*value");
      this.linePlot
        .line()
        .position("year*value")
        .color("type", [
          "#ff4d4f",
          "#ff7a45",
          "#ffa940",
          "#facc14",
          "#bae637",
          "#73d13d",
          "#36cfc9",
          "#40a9ff",
        ]);
      this.linePlot
        .point()
        .position("year*value")
        .size(4)
        .color("type", [
          "#ff4d4f",
          "#ff7a45",
          "#ffa940",
          "#facc14",
          "#bae637",
          "#73d13d",
          "#36cfc9",
          "#40a9ff",
        ])
        .shape("circle");
      //自定义线条颜色 和图例颜色--start---
      this.linePlot
        .line()
        .position("year*count")
        .adjust("stack")
        .color("medalType", function (val) {
          if (val === "Gold Medals") {
            return "#f3ac32";
          } else if (val === "Silver Medals") {
            return "#b8b8b8";
          } else if (val === "Bronze Medals") {
            return "#bb6e36";
          }
        });
      this.linePlot
        .point()
        .position("year*count")
        .adjust("stack")
        .style("medalType", {
          lineWidth: 1,
          fill: "#fff",
          stroke: function stroke(val) {
            if (val === "Gold Medals") {
              return "#f3ac32";
            } else if (val === "Silver Medals") {
              return "#b8b8b8";
            } else if (val === "Bronze Medals") {
              return "#bb6e36";
            }
          },
        });
      //自定义线条颜色 和图例颜色--end---
      this.linePlot.render();
    },
  },
};
</script>