【ECharts】ECharts基本使用和图表的展示

翘阳啦

已于 2022-07-13 18:42:20 修改

阅读量1.1k

点赞数 1

分类专栏：数据可视化-ECharts Vue项目开发文章标签：大数据 javascript echarts 前端 vue.js

于 2022-07-13 18:04:00 首次发布

本文链接：https://blog.youkuaiyun.com/qiaoyangla/article/details/125768270

版权

本文详细介绍了ECharts的基本使用方法，包括如何在页面中引入ECharts库，创建图表容器，以及生成柱状图。进一步讨论了在同一个容器中展示多个不同类型的图表，以及利用ECharts的数据集dataset进行复杂数据绑定和展示，提供了具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECharts基本使用

1、首先在文件中引入ECharts的依赖包

可以通过 BootCDN安装BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

<!-- 引入echarts依赖包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>

2、准备一个容器：

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

各种配置项可以查官网的手册：Documentation - Apache ECharts

// 基于准备好的dom，初始化echarts实例
      var dom = document.querySelector('div')
      var myChart = echarts.init(dom);

      // 指定图表的配置项和数据
      var option = {
        //主标题的设置
        title: {
          text: 'ECharts 入门示例',
          subtext:'数据可视化'
        },
        legend: {
          data: ['销量']
        },
        //x轴配置项
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        //y轴配置项
        yAxis: {
            //显示y轴的线
            axisLine:{
                show:true
            },
            axisTick:{
                show:true