曲线图

<template>
  <div :class="className" style="width:23vw;height:22vh" />
</template>

<script>
import * as  echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from "../../mixins/resize";

const animationDuration = 6000

export default {

  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.initChart(val);
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {

    fontSize(res){
      let docEl = document.documentElement,
        clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res*fontSize;
    },
    initChart(datas) {
      let that = this;
      that.chart = echarts.init(that.$el, 'macarons')
      let xData = ["2018年", "2019年", "2020年", "2021年", "2021年", "2021年", "2021年", "2021年"];
      let firstIndustry = [72, 37, 4, 75, 4, 75, 37, 4]; //第一产业
      let option = {
        grid: {
          top: '15%',
          left: '5%',
          right: '20%',
          bottom: '15%',
         // containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: [
          {
            nameGap: '20',
            type: 'category',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#1f2778',
              },
            },
            splitArea: { show: false},
            axisLabel: {
              color: '#D4DDEC',
              fontSize:that.px2vh(14),
            },
            data: xData,
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '(%)',
            nameTextStyle: {
              color: "#D4DDEC",
              fontSize: that.px2vh(14),
            },
            min: 0,
            max: 100,
            offset: -5,
            interval: 20,
            axisTick: {
              show: false,
            },
            splitArea:{
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                //坐标轴颜色
                color: '#D4DDEC',
                fontSize:that.px2vh(14),
              }
            },
          }
        ],
        series: [
          {
            name: "第一产业",
            data: firstIndustry,
            type: 'line',
            smooth: true, //true曲线; false折线
            itemStyle: {
              normal: {
                color: '#ffc600', //改变折线点的颜色
                lineStyle: {
                  color: '#ffc600', //改变折线颜色
                  type: 'solid'
                }
              }
            },
            areaStyle: {
              //折线图颜色半透明
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255,198,0, 0.1)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };

      that.chart.setOption(option);
      that.chart.resize()
      window.addEventListener("resize",function() {
        that.chart.resize();
      });
    }
  }
}
</script>

 

<template>
  <div :class="className" style="width:23vw;height:22vh" />
</template>

<script>
import * as  echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from "../../mixins/resize";

const animationDuration = 6000

export default {

  mixins: [resize],
props: {
    className: {
      type: String,
default: 'chart'
},
width: {
      type: String,
default: '100%'
},
height: {
      type: String,
default: '100%'
},
chartData: {
      type: Array,
default: () => []
    },
},
data() {
    return {
      chart: null
}
  },
mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
watch: {
    chartData: {
      deep: true,
handler(val) {
        this.initChart(val);
}
    }
  },
beforeDestroy() {
    if (!this.chart) {
      return
}
    this.chart.dispose()
    this.chart = null
},
methods: {

    fontSize(res){
      let docEl = document.documentElement,
clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res*fontSize;
},
initChart(datas) {
      let that = this;
that.chart = echarts.init(that.$el, 'macarons')
      let xData = ["2018年", "2019年", "2020年", "2021年", "2021年", "2021年", "2021年", "2021年"];
let firstIndustry = [72, 37, 4, 75, 4, 75, 37, 4]; //第一产业
let option = {
        grid: {
          top: '15%',
left: '5%',
right: '20%',
bottom: '15%',
// containLabel: true,
},
tooltip: {
          trigger: 'axis',
axisPointer: {
            type: 'cross',
crossStyle: {
              color: '#999'
}
          }
        },
xAxis: [
          {
            nameGap: '20',
type: 'category',
axisTick: {
              show: false,
},
splitLine: {
              show: false
},
axisLine: {
              lineStyle: {
                color: '#1f2778',
},
},
splitArea: { show: false},
axisLabel: {
              color: '#D4DDEC',
fontSize:that.px2vh(14),
},
data: xData,
}
        ],
yAxis: [
          {
            type: 'value',
name: '(%)',
nameTextStyle: {
              color: "#D4DDEC",
fontSize: that.px2vh(14),
},
min: 0,
max: 100,
offset: -5,
interval: 20,
axisTick: {
              show: false,
},
splitArea:{
              show: false,
},
axisLine: {
              show: false,
},
splitLine: {
              show: false
},
axisLabel: {
              textStyle: {
                //坐标轴颜色
color: '#D4DDEC',
fontSize:that.px2vh(14),
}
            },
}
        ],
series: [
          {
            name: "第一产业",
data: firstIndustry,
type: 'line',
smooth: true, //true曲线; false折线
itemStyle: {
              normal: {
                color: '#ffc600', //改变折线点的颜色
lineStyle: {
                  color: '#ffc600', //改变折线颜色
type: 'solid'
}
              }
            },
areaStyle: {
              //折线图颜色半透明
color: {
                type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
                  offset: 0, color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
}, {
                  offset: 1, color: 'rgba(255,198,0, 0.1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
            }
          }
        ]
      };

that.chart.setOption(option);
that.chart.resize()
      window.addEventListener("resize",function() {
        that.chart.resize();
});
}
  }
}
</script>