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

目录

使用步骤

配置项

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

2、取消y轴逗号隔开

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
              }
            },
          }
        ],