echarts 学习笔记

最新推荐文章于 2023-03-19 21:32:30 发布

原创最新推荐文章于 2023-03-19 21:32:30 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

前端专栏收录该内容

2 篇文章

订阅专栏

下载

https://www.jsdelivr.com/package/npm/echarts?path=dist

echarts.js 完整文件，会额外提示错误的原因

echarts.js 可运行的完整文件

基本配置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.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>

echart必须要指定宽高，如果没有报错，而且不显示图像，就说明是没有指定宽高的原因
- 宽度和长度是可以指定100%的
显示一个echarts图标一般要做三步
- 初始化
- 配置数据
- 渲染数据
当有多张图标的时候，要设置不同的myChart和option

图例

https://www.makeapie.com/explore.html 开源社区

https://echarts.apache.org/examples/zh/index.html 官方示例

常见问题

窗口大小修改后，图表随之改变

window.onresize = function() {
	myChart.resize();//在这里添加其他的就可以了
};

事件绑定

myChart.on('click', function(params) {
  	//params中有你好多想要的参数,可以通过控制台输出查看
    //然后执行你想执行的代码
});

常见图表类型的配置

https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/basic-bar
异步获取服务器数据

myChart.setOption({
    xAxis: {
      data: data.categories
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        data: data.values
      }
    ]
});

只需要把需要的配置项传入其中就可以了注意 name必须要加上，echarts会通过这个来寻找需要修改的数据

异步获取数据时，获取数据比较慢怎么办

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

echarts 动画

echarts会根据数据之间的差异选择合适的动画，所以我们在做前后端交互的可视化项目时，尽量要让数据动起来

常见配置

echarts有个强大的地方，就是，如果我们的属性只有一个，我们可以用对象来表示，但是，我们可以把他改成列表，列表里面放对象，这样就有多个了
有的示例是数据series和数据集dataset的source分开的，具有按序对应的关系，我们可以用这个关系，去修改特定数据集的配置
为什么要设计数据集的概念
- 为了数据和样式解耦
- 其中，最关键的为了前后端交互的方便

  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  }
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]

图例 legend
- 和数据无关，只是图例显示
坐标轴
- xAxis
- yAxis
标题

title: {
    text: '饼图程序调用高亮示例',
    left: 'center'
}

hover 提示块

tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
}

一些有用的配置项

legend.type='scroll’图例太多的时候，可以用滚动的方式显示
formatter 支持字符串模板和回调函数两种形式
- https://echarts.apache.org/zh/option.html#tooltip.formatter 字符串模板
textStyle.ellipsis或lineOverflow可以解决文本太长而溢出的问题
dataZoom 解决数据太多，可以放大缩小的问题
toolbox 工具栏
brush 在线数据分析工具
- 通过框选指定的数据而分析
timeline 关联时间变化显示不同的数据