echarts

echartOption.js:配置文件

let option = {
    grid:{
        left:60
    },
    legend: {
          top: "14%", // 图例距离顶部的距离
          left: "left", // 图例水平居中
          data: ['银心', '厚盘', '薄盘', '光晕模型', '自定义多项式', '总速度', '观测值'], //如果某个系列的 `name` 不在 `legend.data` 中，则不会显示图例，也无法通过图例selected控制该系列的显示/隐藏。相当于v-if
          textStyle: {
            color: 'white', // 图例字体颜色
          },
          selected: {//它控制了 `legend.data` 中每一项是否显示。相当于v-show
            '银心': false, // 
            '厚盘': false, // 
            '薄盘': false, // 
            '光晕模型': false, // 
            '自定义多项式': false, // 
            '总速度': false, // 
            '观测值': false, // 
          }
    },
    xAxis: {
        name: "横轴名字",
        nameLocation: "middle",
        nameTextStyle:{
            color:'black',
            padding: [15, 0, 0, 0],
        },
        type: "category",
        data: ["1", "5", "10", "15", "20", "25", "30"],
    },
    yAxis: {
        name: "纵轴名字",
        nameLocation: "middle",
        nameTextStyle:{
            color:'black',
            padding: [10, 0, 15, 0],
        },
        nameRotate: "90",
        nameGap: "30",
        type: "value",
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        showSymbol: false,
        smooth: true, //让折线有弧度
    },],
};
export {option}

引入echarts:vue2

cnpm I echarts --save

main.js:

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

index.vue:

<div id="map" style="width: 100%;height: 100%;"> </div> 
import { option } from "./echartOption.js";
var chart = this.$echarts.init(document.getElementById('map'))      
chart.setOption(option)

引入echarts:vue3

index.vue中：

<div id="map"></div>
import * as echarts from 'echarts';
// 引入echarts配置项文件
import { option } from "../echartOption.js";
var chart = null
function initChart() {
    chart = echarts.init(document.getElementById("map"), null, {
        renderer: "svg",
    });
    chart.setOption(option); // 将配置项设置给echarts实例对象
}
onMounted(()=>{
    initChart();
})

window.addEventListener("resize", () => {
    chart.resize();
})

tips：

给echart传新的数据后要执行下面这段代码

   chart.setOption(option); // 将配置项设置给echarts实例对象

已知dt，自己生成时间作为横坐标：

var time = [0];
var k = 0;
在requestanimateframe中执行以下代码：
k++;
time.push(k*dt);
option.xAxis.data = time;
option.series[0].data = arr1;
chart.setOption(option);