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

目录

ECharts基本使用

ECharts展示多个图表

ECharts一个容器展示多个图表

ECharts数据集dataset的使用

---

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:{
                sho