背景

在实际项目中需要进行图表的绘制，虽然element提供了丰富的绘图接口，但依然不能满足实际的需求，所以需要借用echarts绘制内容更加丰富及美观的图表。

两种方法

echarts的安装方法网上有，这里就不展开了，主要介绍目前用到的两种方法。

采用Vue-echarts

• 需要通过import 按需所取的倒入echarts的绘图组件
• echarts的option存放在data中，并注册组件

<template>
    <v-container fluid >
      <h1>Common Cover Material Properties Comparison </h1>
      <v-divider/>        
        <v-row>
      <v-col cols="12">
        <v-row
          align="stretch"
          justify="center"
          class="grey lighten-5"
          style="height: 400px;"
        >
          <v-chart   :options="bar"/>
          <v-chart   :options="bar"/>
        </v-row>
      </v-col>
    </v-row>
      </v-container>


</template>
<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/toolbox'
export default {
  name: "App",
  components: {
    "v-chart": ECharts
  },
  data :
    function() {
    return {
      bar: {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
        }
    },
    // color: ['#003366', '#006699', '#4cabce', '#e5323e','#003366'],
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            // mark: {show: true},
            // dataView: {show: true, readOnly: false},
            // magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            // restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data: ['E', 'Ro', 'Toughness_LT','Toughness_RT','Toughness_HT'],
            axisLabel: {
                textStyle: {
                fontSize :10
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                textStyle: {
                fontSize :14
                }
            }
        }
    ],
    title: {
          left: 'center',
          text: '应变率 100/s',
        },
    legend: {
        show:true,
        bottom: 10
    },
    series:[]
      }
    };
  },

    mounted(){
      this.getData()
    },
    methods: {
      getData() {
        
      this.$axios.get("/static/json/echart.json").then(
        response => {
          console.log(response.data);
          this.bar.series = JSON.parse(response.data);
          console.log(this.bar.series)
        },
        error => {  
          console.log(error);
        }
      );
    },
    }
  }
</script>
<style>
.my-chart {
  width: 400px;
  height: 500px;
}
</style>

直接用echarts

• 导入 echarts模块
• echarts的option存放在methods中（可以将官网案例代码段直接进行复制；粘贴，不需要任何改动）

<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px; height: 400px"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      DAB: {},
    };
  },
  methods: {
    drawData() {
      this.$axios.get("/static/json/DAB.json").then(
        (response) => {
          console.log('000')
          console.log(response.data);
          this.DAB = JSON.parse(JSON.stringify(response.data));
          console.log("111");
          console.log(this.DAB.data1);
          this.drawPie("main")
        },
        (error) => {
          console.log(error);
        }
      );
    },

    drawPie(id) {
      // this.getData();
      console.log('444')
      console.log(this.DAB.data1)
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "DAB Cover failure SVM Prediction",
          subtext: "Data from: 2021-04-14",
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "7%",
          containLabel: true,
        },
        tooltip: {
          // trigger: 'axis',
          showDelay: 0,
          formatter: function (params) {
            if (params.value.length > 1) {
              return (
                params.seriesName +
                " :<br/>" +
                params.value[0] +
                "cm " +
                params.value[1] +
                "kg "
              );
            } else {
              return (
                params.seriesName + " :<br/>" + params.name + " : " + params.value + "kg "
              );
            }
          },
          axisPointer: {
            show: true,
            type: "cross",
            lineStyle: {
              type: "dashed",
              width: 1,
            },
          },
        },
        toolbox: {
          feature: {
            dataZoom: {},
            brush: {
              type: ["rect", "polygon", "clear"],
            },
          },
        },
        brush: {},
        legend: {
          data: ["No Failure", "Failure"],
          left: "center",
          bottom: 10,
        },
        xAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              formatter: "{value} cm",
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              formatter: "{value} kg",
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "No failure",
            type: "scatter",
            emphasis: {
              focus: "series",
            },
            data: this.DAB.data1.nofailure,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'No failure Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: '平均值'},
                    { xAxis: 160 }
                ]
            }
          },
          {
            name: "Failure",
            type: "scatter",
            emphasis: {
              focus: "series",
            },
            data: this.DAB.data1.failure,
            markArea: {
                silent: true,
                itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                },
                data: [[{
                    name: 'Failure Data Range',
                    xAxis: 'min',
                    yAxis: 'min'
                }, {
                    xAxis: 'max',
                    yAxis: 'max'
                }]]
            },
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'}
                ]
            },
            markLine: {
                lineStyle: {
                    type: 'solid'
                },
                data: [
                    {type: 'average', name: 'Average'},
                    { xAxis: 170 }
                ]
            }
          },
        ],
      });
    },
  },
  //调用
  mounted() {
    this.drawData();
    // console.log("222");
    // console.log(this.DAB.data1);
  //   if (Array.isArray(this.classList) && this.classList.length > 0) {
  //   this.$nextTick(function () {
  //     this.drawPie("main");
  //   });
  // }
    },
};
</script>
<style scoped>
* {
  margin: 10;
  padding: 0;
  list-style: none;
}
</style>

总结

对比两种方法，直接使用echarts组件是比较方便的，有利于一个页面上同时显示不同类型的图标。
此外，不清楚会不会存在vue-echarts更新过慢或者不兼容的问题。

困难点

• vue mounted 中向传入data的数据，貌似不行，找了网上解决方法，没有成功，好像只能运行methods中的函数，索性就把axios获取json文件的代码写到了绘图的前面，就解决了。