【ECharts】基本使用步骤、遇到的一些图表修改配置项

哇哦Q

已于 2022-10-17 09:41:13 修改

阅读量1.1k

点赞数 1

分类专栏： ECharts+高德地图文章标签： echarts 前端 javascript

于 2022-09-02 13:43:30 首次发布

本文链接：https://blog.csdn.net/Qxn530/article/details/126659502

版权

ECharts+高德地图专栏收录该内容

6 篇文章 3 订阅

订阅专栏

本文详细介绍了Echarts的使用步骤，包括安装、初始化图表及配置项设置。具体配置涵盖圆环图中间显示图片、取消Y轴数字逗号分隔、保持Legend在屏幕缩小时的位置、X轴数据格式上下分隔以及双Y轴的网格分隔线样式调整。此外，还提到了如何在页面上有多个Echarts实例时使用dispose方法避免内存问题。

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

3、屏幕缩小，legnd距离不变（只有两个）

4、x轴显示数据格式为上下分开

5、echartes中y轴在grid区域中的分隔线样式（有两个y轴）

使用步骤

第一步：下载 npm install echarts - -save

第二步：准备一个盒子，需要标明id和大小

<div>
    <div id="main" style="width: 500px; height: 400px" />
</div>

第三步：引入echarts import * as echarts from 'echarts';

第四步：在script 标签中初始化图表，设置配置项

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

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

  methods: {
     drawLine () {
      var chartDom = document.getElementById('main');
      //初始化echarts实例对象
      var myChart = echarts.init(chartDom);
      var option;
      //图表配置
      option = {  }

      //绘制图表
      option && myChart.setOption(option);
      //重置echarts图形绘制区域,在自适应屏幕的时候可以用到
      //window.addEventListener('resize', function () {
      //  myChart.resize()
      //})
     }
  }
}
</script>

补充：

dispose => 销毁echarts实例——假如一个页面上有很多的echarts，可能会导致页面崩溃，我们就可以使用dispose方法每隔一段时间销毁一次echarts实例

配置项

1、echartes的圆环图中间显示图片

2、取消y轴逗号隔开

3、屏幕缩小，legnd距离不变（只有两个）

4、x轴显示数据格式为上下分开

xAxis: [
          {
            axisLabel: {
              show: true,
              interval: 0,
              fontSize: `0.1rem`,
              formatter: function (value, index) {
                const b = value.split(' ')
                if (b.length > 2) {
                  return b[0] + ' ' + b[1] + '\n\n' + b[2]
                } else {
                  const a = value.replace(' ', '\n\n')
                  return a
                }
              },
              color: '#6861a6'
            },
          }
        ],

5、echartes中y轴在grid区域中的分隔线样式（有两个y轴）

当有两个y轴的时候，设置splitLine的时候，必须每一个里面都要有，不然没有效果

 yAxis: [
          {
            type: 'value',
            min: 0,
            max: 10000,
            interval: 2000,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#b8b8ba',
              },
            },
            axisLine: {
              show: true,
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5
              }
            },
            axisTick: {
              show: false
            },
          },
          {
            type: 'value',
            min: 0.4,
            max: 0.9,
            interval: 0.1,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#b8b8ba',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5
              }
            },
          }
        ],