chart字体自适应

whyczyk

2021-03-04 c84d328cb6448786aee00f1b0684aaa07186e410

chart字体自适应

 src/assets/js/chartFontsize.js

New file
@@ -0,0 +1,6 @@
export const chartFontsize = (res) => {
  let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = clientWidth / 1920;
  return res * fontSize;
}

 src/components/charts/abeamProChart.vue

@@ -8,8 +8,10 @@

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "abeamProChart",
    chart: "",
@@ -31,6 +33,7 @@
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let dataColor = sendData.color;
        let bgColor = sendData.bgColor;
        let yData = sendData.yData;
@@ -69,7 +72,8 @@
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
                color: '#fff',
                fontSize: chartFontsize(12),
              },
            },
            splitLine: {
@@ -88,7 +92,8 @@
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
                color: '#fff',
                fontSize: chartFontsize(12),
              },
            },
            splitLine: {
@@ -130,7 +135,7 @@
                normal: {
                  show: true,
                  position: 'insideRight',
                  fontSize: 20,
                  fontSize: chartFontsize(20),
                  color: '#021750'
                }
              },
@@ -167,6 +172,7 @@
      },
      resize() {
        this.$options.chart.resize();
        this.setData(this.$options.chartData);
      }
    },
    mounted() {

 src/components/charts/imgPieChart.vue

@@ -8,8 +8,10 @@

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  const pieImg = require('../../assets/images/rectifier-img.png');
  export default {
    name: "imgPieChart",
@@ -32,7 +34,7 @@
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData
        this.$options.chartData = sendData;
        let imgWidth = this.$refs.chart.clientWidth * 0.14;
        let imgheight = imgWidth / 0.82;
        let centerx = this.$refs.chart.clientWidth / 2;
@@ -79,16 +81,16 @@
                rich: {
                  yellow: {
                    color: "#f67f21",
                    fontSize: 16,
                    fontSize: chartFontsize(16),
                    fontWeight: '600',
                    padding: [4, 0, 0, 0],
                    padding: [chartFontsize(4), 0, 0, 0],
                    align: 'center'
                  },
                  white: {
                    color: "#ffffff",
                    align: 'center',
                    fontSize: 12,
                    padding: 4
                    fontSize: chartFontsize(12),
                    padding: chartFontsize(4)
                  },
                  hr: {
                    borderColor: '#007ed3',
@@ -171,7 +173,7 @@
      },
      resize() {
        this.$options.chart.resize();
        this.setData(this.$options.chartData)
        this.setData(this.$options.chartData);
      }
    },
    mounted() {

 src/components/charts/latticeBar.vue

@@ -8,10 +8,13 @@

<script>
  import * as echarts from 'echarts';

  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "latticeBar",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
@@ -29,6 +32,7 @@
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let option = {
          tooltip: {
            trigger: 'axis',
@@ -71,7 +75,7 @@
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: 12,
              fontSize: chartFontsize(12),
              interval: 0
            }
          }],
@@ -91,7 +95,8 @@
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF'
                color: '#FFFFFF',
                fontSize: chartFontsize(12),
              },
            },
          }],
@@ -162,6 +167,7 @@
      },
      resize() {
        this.$options.chart.resize();
        this.setData(this.$options.chartData);
      }
    },
    mounted() {

 src/components/charts/prossPieChart.vue

@@ -8,11 +8,14 @@

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "prossPieChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
@@ -30,6 +33,7 @@
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let color = sendData.color;
        let data = sendData.data;
        let text;
@@ -47,7 +51,7 @@
            textStyle: {
              rich: {
                a: {
                  fontSize: 16,
                  fontSize: chartFontsize(16),
                  color: '#ffffff'
                },
              }
@@ -135,7 +139,7 @@
                normal: {
                  show: true,
                  position: "center",
                  fontSize: 14,
                  fontSize: chartFontsize(24),
                  fontWeight: '600',
                  color: '#ffffff'
                }
@@ -167,7 +171,8 @@
      },
      resize() {
        this.$options.chart.resize();
      }
        this.setData(this.$options.chartData);
      },
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例

 src/components/charts/triangleBarChart.vue

@@ -8,8 +8,10 @@

<script>
  import * as echarts from 'echarts';
  //引入提示框
  import "echarts/lib/component/tooltip";
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "triangleBarChart",
    chart: "",
@@ -31,6 +33,7 @@
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let inData = []
        sendData.data.map(item => {
          inData.push(item - 10);
@@ -70,7 +73,7 @@
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: 12,
              fontSize: chartFontsize(12),
              interval: 0
            }
          }, {
@@ -87,7 +90,7 @@
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: 12,
              fontSize: chartFontsize(12),
              interval: 0
            }
          }],
@@ -108,7 +111,8 @@
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF'
                color: '#FFFFFF',
                fontSize: chartFontsize(12)
              },
            },
          }],
@@ -165,6 +169,7 @@
      },
      resize() {
        this.$options.chart.resize();
        this.setData(this.$options.chartData);
      }
    },
    mounted() {