【VUE】【Echarts】绘制图表组件

准备工作

初始模板

注意：
1.在 HTML 中 一定要有 图表id、长、宽。

<template>
  <div>
    <div id="picName" style="width: 500px; height: 400px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {}
  },
  methods: {},
  mounted() { 
    var chartDom = document.getElementById('picName');
    var myChart = echarts.init(chartDom);
    var option;
    option = {}
  }
}
</script>

<style>
</style>

一 二维图

1.1 option 参数

参数设置

1.2 更新数据

this.request.get("/echarts/getThresholdData").then(res => {
      option.dataset[0].source =[]
      option.dataset[0].source.push(['id', 'threshold', 'acc_score', 'f1_score'],)
      var a = res.data.length
      for (var i=0 ; i < a; i++) {
        option.dataset[0].source.push(
            [res.data[i].id,
             res.data[i].threshold,
             res.data[i].accList,
             res.data[i].f1List]
        )
      }
      myChart.setOption(option)
    })

二 三维图

三 完整示例

<template>
  <div>
    <div id="line" style="width: 500px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from "../../utils/request"

export default {
  data() {
    return {
      tableData: [],
    }
  },
  methods: {},
  mounted() { //页面元素渲染后再触发

    console.log(1111)
    var chartDom = document.getElementById('line');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '算法评价 score'
      },
      xAxis: {
        type: 'value',
        name: 'threshold',
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        name: 'score',
        scale: true,
      },
      dataset: [
        {
          id: 'dataset_raw',
          source: [
            ['id', 'threshold', 'acc_score', 'f1_score'],
            [1, 0, 85.8, 93.7],
            [2, 5, 73.4, 55.1],
            [3, 10, 65.2, 82.5],
            [4, 15, 53.9, 39.1]
          ]
        },
        {
          id: 'acc_score',
          fromDatasetId: 'dataset_raw',
        },
        {
          id: 'f1_score',
          fromDatasetId: 'dataset_raw',
        }
      ],

      legend: {
        data: ['acc_score', 'f1_score']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },

      series: [
        {
          name: 'acc_score',
          type: 'line',
          datasetId: 'dataset_raw',
          encode: {
            x: 'threshold',
            y: 'acc_score',
          },
          smooth: true
        },
        {
          name: 'f1_score',
          type: 'line',
          datasetId: 'dataset_raw',
          encode: {
            x: 'threshold',
            y: 'f1_score',
          },
          smooth: true,
          symbolSize: 0, //设定实心点的大小
          normal: {
            color: '#6cb041',
            lineStyle:{
              width:1//设置线条粗细
            }
          }
        },
      ]
    };
    myChart.setOption(option);


    this.request.get("/echarts/getThresholdData").then(res => {
      option.dataset[0].source =[]
      option.dataset[0].source.push(['id', 'threshold', 'acc_score', 'f1_score'],)
      var a = res.data.length
      for (var i=0 ; i < a; i++) {
        option.dataset[0].source.push(
            [res.data[i].id,
              res.data[i].threshold,
              res.data[i].accList,
              res.data[i].f1List]
        )
      }
      myChart.setOption(option)
    })


  }
}
</script>

<style>

</style>