Echarts - 实际开发 - 《🥇前端进阶目录》

快速上手
Vue中使用
实际使用
- 饼状图
常见问题
- echarts 数据重新加载，原数据依然存在

使用方式以及需要注意什么
版本区别
reseize 这个方法

关于配置项
标题与legend 重叠
legend 配置需要保持一致才可以显示出来

快速上手

获取ECharts

通过 npm 获取 echarts，npm install echarts —save，详见“在 webpack 中使用 echarts”

引入 ECharts

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 引入 ECharts 文件 -->
  <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="echarts.min.js"></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  </script>
</body>
</html>

Vue中使用

安装依赖

npm install echarts --save

引入echarts

全局使用，通过 Vue.prototype 将 echarts 保存为全局变量

//main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//注意：新版本的引入可能有变化
import * as echarts from 'echarts';

使用示例

<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
export default {
  name: 'Echarts',
  methods:{
      myEcharts(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('main'));
          // 指定图表的配置项和数据
          var option = {
              title: {
                  text: 'ECharts 入门示例'
              },
              tooltip: {},
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
              },
              yAxis: {},
              series: [{
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
              }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          }
  },
  mounted() {
      this.myEcharts();
  }
}
</script>

实际使用

饼状图

饼图位置

// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

场景：legend 显示过长
legned 格式化

legend: {
    formatter: (name) => {
       if (!name) return ''
       if (name.length > 10) { 10是截取的字符串长度，根据你的情况调整数值
         name = name.slice(0, 10) + '...'
       }
       return name
     }
 }

参考链接：
https://codeantenna.com/a/VoYH0emBsL
https://blog.csdn.net/wwf1225/article/details/117418587
https://www.crifan.com/echarts_pie_chart_graph_position_move_left/
https://blog.csdn.net/weixin_43899935/article/details/107185591

标签重叠问题
设置 avoidLabelOverlap: true

常见问题

echarts 数据重新加载，原数据依然存在

官方文档

有两种方法能删除组件：

删除所有：使用 notMerge: true，则所有组件都被删除。
删除部分：使用 replaceMerge: […]，被指定的组件类型，会根据 replaceMerge 的规则：如果 id 匹配就合并（ merge ），否则旧组件被删除，新组件被创建。“部分删除” 有助于，在删除该删除的组件时，保留其他组件的状态（如高亮、动画、选中状态）。

原因：多次调用时，option选项默认是合并（merge）的，加上 true表示不合并配置
解决方案一：
修改 setOption 的第二个参数 notMerge

myChart.setOption(option,true); // 加上true表示不合并配置

解决方案二：
先清空在进行配置

myChart.clear();
myChart.setOption({...})