VUE ECharts 自定义Y轴刻度数据间隔简单实现

Aku_2020

已于 2022-07-25 15:58:26 修改

阅读量2.7k

点赞数

分类专栏： echarts vue 文章标签： echarts vue.js javascript

于 2022-07-25 15:42:35 首次发布

本文链接：https://blog.csdn.net/Aku_2020/article/details/125976416

版权

本文介绍了如何在Vue项目中使用ECharts组件，通过配置ECharts选项来自定义Y轴的刻度数据间隔，以达到更符合需求的图表展示效果。详细阐述了关键代码实现过程。

摘要由CSDN通过智能技术生成

最终实现效果：

实现代码为：

<template>
  <div class="app-container home">
    <div class="charts" ref='charts'></div>
  </div>
</template>

<script>
  import echarts from 'echarts'   //npm install echarts@4.9.0
  export default {
    data () {
      return {
        //数据
        yxlData: [10,20,30,50,50,10,50,60,10,50,10,30],
        //x轴
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
        //自定义数据间隔
        dataInterval: [0, 10, 15, 30, 35, 40, 50, 70],
        yxlData2: [],

        option:{
          color: "#8838b3", // 控制图例和折线的颜色，可以是颜色组
          title: {
            text: '2021年某品牌水杯营销量'
          },
          tooltip: {}, //鼠标滑过时悬浮窗提示内容
          legend: {//图例的类型
            icon:'roundRect',//图例icon图标
            data: [{
                name:"营销量",
                textStyle: {
                  color: '#8838b3'
                }
              }