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

目录

ECharts基本使用

ECharts展示多个图表

ECharts一个容器展示多个图表

ECharts数据集dataset的使用

---

ECharts基本使用

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

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

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
            }
        },
        //系列的设置：绘制什么类型的图表type、数据在这里展示
        series: [
          {
            name: '销量',
            //图标类型的设置
            type: 'bar',
            //图标的数据
            data: [5, 20, 36, 10, 10, 20],
            color:'red'
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

ECharts展示多个图表

 只需要准备两个容器 

 // 基于准备好的dom，初始化echarts实例
      var dom1 = document.querySelector('.box1')
      var dom2 = document.querySelector('.box2')
      var myChart1 = echarts.init(dom1);
      var myChart2 = echarts.init(dom2);

      // 第一个省略
      

      //第二个图表
      myChart2.setOption({
          //主标题的设置
          title: {
            text: '折线图',
            left:'center',
            textStyle:{
               color:'blue'
            },
            subtext:'翘阳啦',
            shutextStyle:{
              color:'cyan'
            }
         },
          xAxis:{
            data:['星期一','星期二','星期三','星期四','星期五']
          },
          yAxis:{},
            //图表类型与数据
          series:[
              {
                type:'line',
                data:[10,25,53,21,13]
              }
            ]
      })

ECharts一个容器展示多个图表

 只需要在series里设置多个类型的图表即可：

series: [
          //柱状图
          {
            name: '销量',
            //图表类型的设置
            type: 'bar',
            //图表的数据
            data: [5, 20, 36, 10, 10, 20],
            color:'red'
          },
          //折线图
          {
            //图表类型的设置
            type: 'line',
            //图表的数据
            data: [5, 20, 36, 10, 10, 20],
            color:'blue'
          },
          //饼图
          {
            //图表类型的设置
            type: 'pie',
            //饼图可以显示文字，data写法如下
            data: [{name:'衬衫',value:5},{name:'羊毛衫',value:20},{name:'雪纺衫',value:36},{name:'裤子',value:10},{name:'高跟鞋',value:10},{name:'袜子',value:20},],
            //饼图的宽度和高度
            width:150,
            height:150,
            //饼图的位置
            left:120,
            top:50,
            //饼图的半径
            radius:25
          }
        ]

ECharts数据集dataset的使用

先把数据放到data中：

第一个为x轴数据，第二个为柱状图数据，第三个为折线图数据，第四个为饼图的文字，第五个为饼图的数据

let data =[
        ["衬衫",5,5,"衬衫",5],
        ["羊毛衫",20,20,"羊毛衫",20],
        ["雪纺衫",36,36,"雪纺衫",36],
        ["裤子",10,10,"裤子",10],
        ["高跟鞋",10,10,"高跟鞋",10],
        ["袜子",20,20,"袜子",20],
      ]

需要再下面的series里配置encode属性：

对象里的y代表图表数据为data数据集中的索引y

饼图里要说明itemName和value的索引，分别代表饼图的文字和数据

//x轴配置项
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        //y轴配置项
        yAxis: {
            //显示y轴的线
            axisLine:{
                show:true
            },
            axisTick:{
                show:true
            }
        },
        //系列的设置：绘制什么类型的图表type、数据在这里展示
        series: [
          //柱状图
          {
            name: '销量',
            //图标类型的设置
            type: 'bar',
            //图标的数据
           // data: [5, 20, 36, 10, 10, 20],
            color:'red',
            encode:{
              y:1
            }
          },
          //折线图
          {
            //图标类型的设置
            type: 'line',
            //图标的数据
            //data: [5, 20, 36, 10, 10, 20],
            color:'blue',
            encode:{
              y:2
            }
          },
          //饼图
          {
            //图标类型的设置
            type: 'pie',
            //饼图可以显示文字，data写法如下
           // data: [{name:'衬衫',value:5},{name:'羊毛衫',value:20},{name:'雪纺衫',value:36},{name:'裤子',value:10},{name:'高跟鞋',value:10},{name:'袜子',value:20},],
            //饼图的宽度和高度
            width:150,
            height:150,
            //饼图的位置
            left:120,
            top:50,
            //饼图的半径
            radius:25,
            encode:{
              //饼图旁边的文字
              itemName:3,
              value:4
            }
          }
        ]