echart 温度计（vue 组件引用）

项目需求，既然写了就记录一下。

（因为需要多次使用，所以把echart 封装成单独的一个组件，在父组件中使用。）

效果图：

 

 

这是子组件的代码:

1. 布局（id是echart页面渲染中需要用到的）

<div style="background: #f6f6f6">
    <div>
      <div id="main" style="width: 400px; height: 460px"></div>
    </div>
  </div>

2. js（在这里echart的js部分 写到了另一个文件里 这里自作引用部分）

<script>
import * as echarts from "echarts";

import { echarts_mode } from "./axisIndexEcharts"; //echart 数据

export default {
  name: "axisIndex",
  // components: {},
  data() {
    return {};
  },
  props: {
    robotId: {
      type: String,
      default: "",
    },
  },
  created() {},
  mounted() {
    let modeSummary = {
      GOOD: 1,
      OFFLINE: 10,
      NORMAL: 0,
      UNKNOWN: 0,
      BAD: 0,
    };
    echarts_mode(echarts, modeSummary);
  },

  methods: {
 
  },
  beforeDestroy() {},
};
</script>

3.js  温度计的主要代码
 

import moment from "moment";
import _, { max } from "lodash";
// import * as echarts from "echarts";


// 温度计数据
export function echarts_mode(echarts, modeSummary) {
  var myChart = echarts.init(document.getElementById('main'))

      var TP_value = 550
      var kd = []
      var Gradient = []
      var leftColor = ''
      var showValue = ''
      var boxPosition = [65, 0]
      var TP_txt = ''
      // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
      for (var i = 0, len = 120; i <= len; i++) {
        if (i < 10 || i > 120) {
          kd.push('')
        } else {
          if ((i - 10) % 10 =