单个vue echarts页面

<template>

    <div ref="history" class="echarts"></div>

</template>

<script>

  export default{

    data () {

      return {};

    },

    methods: {

      history(){

      let myChart = this.$echarts.init(this.$refs.history);

        // 绘制图表

        myChart.setOption({

            textStyle: {

              color: '#fff' // 设置文字颜色为白色

            },

            title: {

              text: '载重',

              textStyle: {

                color: '#fff' // 设置标题颜色为红色

              }

            },

            legend: {

              data: ['载重'],

              textStyle: {

                color: '#fff' // 设置标题颜色

              }

            },

            tooltip: {},

            xAxis: {

              type: 'category',

              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

              axisLine: {

                lineStyle: {

                  color: '#fff' // 设置 x 轴轴线颜色

                }

              },

            },

            yAxis: {

              type: 'value',

              axisLine: {

                lineStyle: {

                  color: '#fff' // 设置 x 轴轴线颜色

                }

              },

            },

            series: [

              {  

                name:"载重",

                data: [820, 932, 901, 934, 1290, 1330, 1320],

                type: 'line',

                color: '#ff0000', // 设置线段的颜色

                smooth: true

              }

            ]

        });

    },

    },

    mounted () {

      this.history();

    }

  }

</script>

<style scoped>

.echarts{

  width: 100%;

  height: 100%;

}

</style>