[JavaScript知识库]2021-08-03

数据可视化之echarts

页面渲染echarts步骤
1.下载并引入echarts.js文件
2.准备一个具备大小的DOM容器
3.初始化echarts实例对象
4.指定配置项和数据（options）
5.将配置项设置给echarts实例对象

（function（）{
 //实例化对象
  var myChart = echarts.init(document.querySelector('.bar'))
  //指定配置项和数据
  option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
    }]
};
  //把配置项给实例对象
  myChart.setOption(option)
}）();

讲解options配置项

  option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']，
        //修改刻度标签相关样式
        axisLabel:{
          color:"red",
          fontSize:"12",
          
        },
        //不显示x轴样式
        axisLine:{
          show:false
        }
    },
    //修改图标的大小
    grid:{
      left:"10%",
      top:"10px",
      right:"0%",
      bottom:"4%",
      //是否与坐标轴有间隙
      containLabel:true
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        }
    }]
};