Vue ECharts y轴设置固定分段 + makerline设置为不同的样式作为区分 - 附完整示例

ECharts：一个基于 JavaScript 的开源可视化图表库。

目录

 效果

一、介绍

1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、完整示例

---

 效果

一、介绍

1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

二、准备工作

1、安装依赖包

npm install echarts --save

 2、示例版本 

"echarts": "^5.4.2",

三、完整示例

​
<template>
  <div id="main"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "chartView",
  data() {
    return {
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: "category",
          nameTextStyle: {
            padding: 30,
          },
          boundaryGap: false,
          data: ["2012", "2013", "2014", "2015", "2016"],
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // show: false,
          splitLine: {
            lineStyle: {
              type: [10, 5],
            },
            show: false,
          },
          axisLine: {
            show: true,
          },
          min: 0,
          max: "100",
          axisLabel: {
            formatter: "{value} %",
            textStyle: {
              // 设置分段颜色
              color: function (value) {
                console.log(value);
                if (value >= 0 && value <= 30) {
                  return "#2c3e50";
                } else if (value > 30 && value <= 60) {
                  return "#2c3e50";
                } else if (value > 60 && value < 90) {
                  return "#2c3e50";
                } else if (value === 90) {
                  return "";
                } else if (value > 90 && value <= 100) {
                  return "#2c3e50";
                }
              },
            },
          },
          splitNumber: 3,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
          },
          formatter: function (params, ticket, callback) {
            console.log(params);
            console.log(ticket);
            console.log(callback);
            const { name, value, marker } = params[0];
            const content = `时间：${name}<br>${marker}占比：${value}%`;
            return content;
          },
        },
        series: [
          {
            data: ["20", "60", "38", "72", "35", "28", "30"],
            type: "line",
            smooth: true,
            markLine: {
              symbol: "none",
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "dashed",
                    color: "orange",
                  },
                  label: {
                    position: "end",
                    color: "orange",
                    formatter: function (params) {
                      console.log(params);
                      const { value } = params;
                      const content = `${value}%`;
                      return content;
                    },
                  },
                  yAxis: 30, // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                },
                {
                  silent: false,
                  lineStyle: {
                    type: "dashed",
                    color: "red",
                  },
                  label: {
                    position: "end",
                    color: "red",
                    formatter: function (params) {
                      console.log(params);
                      const { value } = params;
                      const content = `${value}%`;
                      return content;
                    },
                  },
                  yAxis: 60,
                },
                {
                  silent: false,
                  lineStyle: {
                    type: "dashed",
                    color: "brown",
                  },
                  label: {
                    position: "end",
                    color: "brown",
                    formatter: function (params) {
                      console.log(params);
                      const { value } = params;
                      const content = `${value}%`;
                      return content;
                    },
                  },
                  yAxis: 100,
                },
              ],
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  width: 1000px;
  height: 500px;
}
</style>

​

 欢迎扫码下方二维码关注VX公众号