echarts在vue的导入和使用（以及根据y值的范围区间不同显示柱子的颜色不同的代码实例）

【1】在vue的终端安装echarts

1.在终端输入命令：npm install echarts -s

安装完成后在package.json里面是可以看到echarts的版本信息的。

2.在main.js写入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.在vue界面输入import * as echarts from "echarts";导入，在<template>里面设置一个显示的容器，比如div等，该div必须设置宽和高才能显示出来echarts

4.在export.default里面输入echarts的相关代码可以展示出图表

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

export default {
  data() {
    return {
      chartColumn: null,
    };
  },

  mounted() {
    this.drawLine();
  },

  methods: {
    drawLine() {
      this.chartColumn = echarts.init(document.getElementById("chartColumn"));
      // THIS.chartColumn = echarts.init(this.$refs.charttest);

      this.chartColumn.setOption({
        title: {
          text: "各线体实时累计达成情况",
          // subtext: "组装车间",
          // 设置标题居中
          x: "center",
          y: "top",
          textAlign: "left",
          subtextAlign: "left",
        },
        // 配置提示信息
        tooltip: {
          // 轴触发，axis表示鼠标点到一条柱状图，显示全部类型的数据，item则鼠标hover到折线点显示相应数据
          trigger: "axis",
          // trigger: "item",
          //
          // axisPointer: { type: "cross" },
          axisPointer: {
            //坐标轴指示器，坐标轴触发有效
            type: "cross", //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              //设置提示框组件指示器的 crossStyle，axisPointer.type 为 'cross' 时有效。
              color: "blue",
            },
          },
        },

        legend: {
          // orient: "vertical",
          orient: "horizontal",
          right: "center",
          top: "10%",
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: ["BZT01", "BZT02", "BZT03", "BZT04", "BZT05", "BZT06"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "实际值",
            min: 0,
            max: 1000,
            position: "left",
            axisLabel: {
              formatter: "{value}pcs",
            },
          },
          // {
          //   type: "value",
          //   name: "理论值",
          //   min: 0,
          //   max: 550,
          //   position: "left",
          //   axisLabel: {
          //     formatter: "{value} pcs",
          //   },
          // },
        ],

        // 解决移动端y轴显示不全
        grid: {
          left: "1%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
        series: [
          {
            name: "实际值",
            type: "bar",
            yAxisIndex: 0,
            data: [34, 56, 900, 100, 20, 45],
            itemStyle: {
              label: {
                show: true,
                textStyle: {
                  fontWeight: "bolder",
                  fontSize: "12",
                  fontFamily: "微软雅黑",
                },
                position: "top",
              },
              normal: {
                color: function (params) {
                  //根据实际值的值的范围设置实际值柱子的颜色
                  if (params.value > 0 && params.value < 100) {
                    return "#FE8463";
                  } else if (params.value >= 100 && params.value <= 300) {
                    return "#27727B";
                  }
                  return "#9BCA63";
                },
              },
            },
          },
          {
            name: "目标值",
            type: "line",
            smooth: true,
            yAxisIndex: 0,
            data: [30, 23, 500, 90, 10, 56],
          },
        ],
      });
    },
  },
};
</script>