数据显示框编辑显示
tooltip: {
  trigger: "axis",
  //主要代码
  formatter: function (params) {
    for (let i = 0; i < params.length; i++) {
      var relVal = params[i].name;
    }
    for (let i = 0; i < params.length; i++) {
      let unit = baseProperty.energyExpendUnit;
      if (params[i].seriesName.indexOf("比") > -1) {
        unit = "%";
      }
      if (i >= 1) {
        relVal += "<br/>" + params[i].marker + params[i].seriesName + ":" + params[i].data.value + unit;
      } else {
        relVal += "<br/>" + params[i].marker + params[i].seriesName + ":" + params[i].data + unit;
      }
    }
    return relVal;
  }
},

正确的应该是：

this.charts.setOption(data,true);

再次刷新，问题解决,

查看官方文档后发现setOption有3个属性

setOption(option,notMerge,lazyUpdate);

第二个notMerge默认为false,即默认合并两个数据

置为true之后则不合并数据了，就可以实现刷新数据的效果了

前端样式和名字id

方式一

<div>
  <div class="box" style="width: 100%; height: 350px">
    <div id="tracker" style="width: 1300%; height: 350%"></div>
  </div>
</div>

方式二  这种方式不用innit方法，可以直接赋值，但是无法数据更新无法合并
<v-chart :option="baseProperty.stackedLineOne" style="width: 100%; height: 370%" />

vue2引入

使用 require 可以达到按需加载、减小打包体积的目的。如果页面只用到了折线图，没必要把整个echarts.min.js 都引入进来，使用下面的方式比较好

<script>
// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');
// 引入折线图
require('echarts/lib/chart/line');
// 引入提示框
require('echarts/lib/component/tooltip');
// 引入图例
require('echarts/lib/component/legendScroll');
// 引入工具箱
require('echarts/lib/component/toolbox');
export default {
  name: 'DailyEnergyReportOfPatch',
  data() {

vue3 引入

<script>
import * as echarts from "echarts/core";
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import VChart, { THEME_KEY } from "vue-echarts";
echarts.use([TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition]);
 export default defineComponent({
  name: "historicalData",
  components: {
    VChart
  },
  setup() {
  let baseProperty = reactive({
      loading: false,
      stackedLineOne: null,
      stackedLineTwo: null,
      stackedLineThree: null,
      stackedLegend: [],
      tableData: [],
      lineOneXSeries: [],
      lineOneSeries: [],
      lineTwoXSeries: [],
      lineTwoSeries: []
      })
       const getOption = () => {
      baseProperty.stackedLineOne = {
        title: {
          textStyle: {
            color: "#00aeff", // 颜色
            fontStyle: "normal", // 风格
            fontWeight: "bold", // 粗细
            fontFamily: "Microsoft yahei", // 字体
            fontSize: 15, // 大小
            align: "center" // 水平对齐
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: baseProperty.stackedLegend,
          textStyle: {
            fontSize: 11,
            color: "#5298f8",
            fontWeight: "normal"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              fontSize: 11,
              color: "#5298f8",
              fontWeight: "normal"
            }
          },
          data: baseProperty.lineOneXSeries
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: 11, // 文字大小
              fontWeight: "normal", // 文字粗细
              color: "#5298f8"
            }
          }
        },
        series: baseProperty.lineOneSeries
      };
      var one = echarts.init(document.getElementById("box"));
      one.setOption(baseProperty.stackedLineOne, true);
    };
    
    数据处理
const searchAddressBox = () => {
      console.log("searchAddressBox");
      if (searchForm.trackerCode !== "") {
        searchForm.trackerCode = "";
      }
      //判断时间 如果是时间范围要对时间范围的时间进行判空
      if (baseProperty.timeStartStop == null) {
        searchForm.starTime = "";
        searchForm.endTime = "";
      }
      if (searchForm.viewBy == "timePeriod" && searchForm.displaysTheDensity == "" && searchForm.timePeriod == "") {
        ElMessage.error("请选择时间段才能查询");
        return;
      }
      if (searchForm.viewBy == "timeStartStop" && searchForm.displaysTheDensity == "" && baseProperty.timeStartStop == "") {
        ElMessage.error("请选择时间范围才能查询");
        return;
      }
      if (searchForm.displaysTheDensity == "") {
        ElMessage.error("请选择时间密度才能查询");
        return;
      }
      //将时间拆分成两个时间字符串
      if (baseProperty.timeStartStop !== "") {
        searchForm.starTime = baseProperty.timeStartStop[0];
        searchForm.endTime = baseProperty.timeStartStop[1];
      }
      /*if (searchForm.projectCode=="")*/
      //通讯箱查询
      console.log(searchForm);
      if (searchForm.addressBoxCode !== "" && searchForm.trackerCode == "" && searchForm.deviceCollectionCodeArray.length > 0) {
        searchForm.deviceCode = searchForm.addressBoxCode;
        proxy.ajax({
          url: "/device/basDevice/historicalData",
          method: "post",
          data: searchForm,
          success: function (res) {
            baseProperty.stackedLegend = [];
            baseProperty.lineOneSeries = [];
            /* baseProperty.lineOneXSeries = [];*/
            /* if (res[0].length > 0) {
              res[0].forEach((item) => {
                baseProperty.lineOneXSeries.push(item.collectionTime);
              });
            }*/
            let color = [
              "#7cb5ec",
              "#434348",
              "#90ed7d",
              "#f7a35c",
              "#8085e9",
              "#e4d354",
              "#2b908f",
              "#91e8e1",
              "#058DC7",
              "#50B432",
              "#DDDF00",
              "#24CBE5",
              "#64E572",
              "#FF9655",
              "#FFF263",
              "#6AF9C4",
              "#D47F00",
              "#00FFFF",
              "#D4FF55",
              "#4572A7",
              "#AA4643",
              "#89A54E",
              "#80699B",
              "#3D96AE",
              "#DB843D",
              "#92A8CD",
              "#A47D7C",
              "#7FBF55",
              "#a5c2d5",
              "#cbab4f",
              "#76a871",
              "#a56f8f",
              "#c12c44",
              "#9f7961",
              "#76a871",
              "#6f83a5",
              "#b3d74c",
              "#74aae3",
              "#5cdec6",
              "#3526de",
              "#9d65ee",
              "#a8b3e3",
              "#6bc1b7",
              "#6e98d6"
            ];
            for (let i = 0; i < searchForm.deviceCollectionCodeArray.length; i++) {
              /*console.log(baseProperty.measurePointsList);
              console.log(searchForm.deviceCollectionCodeArray[i]);*/
              console.log(searchForm.deviceCollectionCodeArray[i]);
              console.log(baseProperty.measurePointsList.filter((hanhan) => hanhan.deviceCollectionCode == searchForm.deviceCollectionCodeArray[i])[0].deviceCollectionName);
              let data = [];
              /*   console.log(res[i]);*/
              if (res[i].length > 0) {
                baseProperty.lineOneXSeries = [];
                res[i].forEach((item) => {
                  baseProperty.lineOneXSeries.push(item.collectionTime);
                  data.push(item.collectionData);
                });
                baseProperty.stackedLegend.push(baseProperty.measurePointsList.filter((hanhan) => hanhan.deviceCollectionCode == searchForm.deviceCollectionCodeArray[i])[0].deviceCollectionName);
                baseProperty.lineOneSeries.push({
                  name: baseProperty.measurePointsList.filter((hanhan) => hanhan.deviceCollectionCode == searchForm.deviceCollectionCodeArray[i])[0].deviceCollectionName,
                  type: "line",
                  smooth: true,
                  itemStyle: {
                    // 连线颜色
                    normal: {
                      color: color[i]
                    }
                  },
                  data: data
                });
              }
            }
            getOption();
          }
        });
      } else {
        ElMessage.error("请选择好条件才能查询");
        return;
      }
    };

require和import的区别

1.import在代码编译时被加载，所以必须放在文件开头，require在代码运行时被加载，所以require理论上可以运用在代码的任何地方，所以import性能更好。 2.import引入的对象被修改时，源对象也会被修改，相当于浅拷贝，require引入的对象被修改时，源对象不会被修改，官网称值拷贝，我们可以理解为深拷贝。 3.import有利于tree-shaking（移除JavaScript上下文中未引用的代码），require对tree-shaking不友好。 4.import会触发代码分割（把代码分离到不同的bundle中，然后可以按需加载或者并行加载这些文件），require不会触发。 5.import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法，require 是 AMD规范引入方式。

目前所有的引擎都还没有实现import，import最终都会被转码为require，在webpack打包中，import和require都会变为_webpack_require_。

Echarts - title属性设置

(18条消息) 怎样在echarts里面调整标题的位置_匆匆prayChina的博客-CSDN博客_echarts title位置

(18条消息) Echarts y轴高度设置（宽度铺满整个父级高度）_start_f_scratch的博客-CSDN博客_echarts y轴高度

grid: {
  y: '16%', // y 偏移量
  width: '87%', // 宽度
  height: '70%'// 高度
},
title: {
  text: '异常信息统计',
  padding: [0, 10, 0, 80],
  textStyle: {
    fontStyle: 'oblique', // 斜体
    fontWeight: '700', // 粗细
    fontFamily: 'monospace'
  },
  left: 'left'
},

Echarts中设置柱状图或其他图形，主标题的偏移位置，可以通过这个padding属性来设置

padding:[5,10,5,5],//设置标题内边距,上，右，下，左

title: {
         // 标题
         show: true, //是否显示
         text: "4545",
         textStyle: {
           color: "#fff", // 主标题文字的颜色。
           fontStyle: "normal", // 主标题文字字体的风格。 'normal'  'italic'  'oblique'
           fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600
           fontFamily: "sans-serif", // 主标题文字的字体系列。
           fontSize: 18, // 字体大小
           lineHeight: "30", // 行高
           // width ... , // 文字块的宽度
           // height ... , // 文字块的高度
           textBorderColor: "transparent", // 文字本身的描边颜色。
           textBorderWidth: 0, // 文字本身的描边宽度。
           textShadowColor: "transparent", // 文字本身的阴影颜色。
           textShadowBlur: 0, // 文字本身的阴影长度。
           textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
           textShadowOffsetY: 0, //  文字本身的阴影 Y 偏移。
         },
         subtext: "bb", // 副标题文本
         show: true, //是否显示
        subtextStyle: {
           color: "#fff", // 主标题文字的颜色。
           fontStyle: "normal", // 主标题文字字体的风格。 'normal'  'italic'  'oblique'
           fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600
           fontFamily: "sans-serif", // 主标题文字的字体系列。
           fontSize: 18, // 字体大小
           lineHeight: "30", // 行高
           // width ... , // 文字块的宽度
           // height ... , // 文字块的高度
           textBorderColor: "transparent", // 文字本身的描边颜色。
           textBorderWidth: 0, // 文字本身的描边宽度。
           textShadowColor: "transparent", // 文字本身的阴影颜色。
           textShadowBlur: 0, // 文字本身的阴影长度。
           textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
           textShadowOffsetY: 0, //  文字本身的阴影 Y 偏移。
         },
         textAlign: "auto", //水平对齐'auto'、'left'、'right'、'center'
         textVerticalAlign: "auto", // 垂直对齐  'auto'、'top'、'bottom'、'middle'
         triggerEvent: false, // 是否触发事件
         padding: 5, // 标题内边距  5/[5,2,4,7]
         itemGap: 10, //主副标题之间的间距
         left: 10, // 距离 left top right bottom
         backgroundColor: "pink", // 标题背景色
         borderColor: "#ccc", // 标题的边框颜色
         borderWidth: 5, // 标题的边框线宽。
         borderRadius: 2, // 圆角半径
         shadowBlur: 10, //图形阴影的模糊大小
         shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
         shadowOffsetX: 5, // 阴影水平方向上的偏移距离。
         shadowOffsetY: 5, //阴影垂直方向上的偏移距离。
       },

(18条消息) 四、html字体样式，外观属性_helloWorldAndYou的博客-CSDN博客_html字体样式代码

windows常见内置中文字体

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

宋体：SimSuncss中中文字体（font-family）的英文名称

Mac OS的一些：

华文细黑：STHeiti Light [STXihei]

华文黑体：STHeiti

华文楷体：STKaiti

华文宋体：STSong

华文仿宋：STFangsong

儷黑 Pro：LiHei Pro Medium

儷宋 Pro：LiSong Pro Light

標楷體：BiauKai

蘋果儷中黑：Apple LiGothic Medium

蘋果儷細宋：Apple LiSung Light

Windows的一些：

新細明體：PMingLiU

細明體：MingLiU

標楷體：DFKai-SB

黑体：SimHei

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

仿宋_GB2312：FangSong_GB2312

楷体_GB2312：KaiTi_GB2312

微軟正黑體：Microsoft JhengHei

微软雅黑体：Microsoft YaHei

装Office会生出来的一些：

隶书：LiSu

幼圆：YouYuan

华文细黑：STXihei

华文楷体：STKaiti

华文宋体：STSong

华文中宋：STZhongsong

华文仿宋：STFangsong

方正舒体：FZShuTi

方正姚体：FZYaoti

华文彩云：STCaiyun

华文琥珀：STHupo

华文隶书：STLiti

华文行楷：STXingkai

华文新魏：STXinweihttp://localhost:8082/chuangsi-service

require和import的区别

Echarts - title属性设置

Echarts中设置 柱状图或其他图形，主标题的偏移位置，可以通过这个padding属性来设置

padding:[5,10,5,5],//设置标题内边距,上，右，下，左

Echarts中设置柱状图或其他图形，主标题的偏移位置，可以通过这个padding属性来设置