echarts学习笔记

作用：可视化数据，即借助图形，清晰的传达信息的表现方式，把枯燥的数据转化为图形

1.echarts基本介绍

是一个开源的可视化图表库，就是js插件

特点：

• 性能好，运行于pc端与移动端

• 兼容主流浏览器

• 提供了非常多的图表，支持定制

使用

1.下载echarts，引入

2.准备一个具有宽高的dom容器 div

3.初始化echarts实例 init

4.准备配置项 option

5.基于配置项显示图表 setoption

容器多大图表就有多大

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

    // 指定图表的配置项和数据
      var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
                }
            ]
            };

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

去echarts里看文档查看配置项

2.常用的配置项

1.标题组件 title

属性

show：true或者false

text：“标题文字”

textstyle：{

color：“red”，

fontsize：“20px”

}，

left：“20px”，

top：“10px”， 这个距离上和左是指距离盒子的距离

2.提示框 tooltip

鼠标放上去会出来提示框，提示当前数据

触发类型 trigger ：item散点图 axis坐标轴触发， 直线图柱状图 none不触发

是否显示提示框的浮层showcontent

enterable鼠标是否可以进入提示框浮层

• 可以在echarts的示例里面直接写代码，就能实时更新代码的结果，再看看其他的配置项

3.图例 legend

属性：data图例的数据数组，里面放的是几个name

series组件里也有data属性，里面存的是数字，有name属性，就是这条data是谁的数据，那么就是谁

legend的data的值要和series.name对应

4.绘制网格grid

就是整体的坐标轴，有left，right，bottom，也是距离盒子的距离，左0下0坐标轴就不见了。

但是也可以设置containlabel为true，是否包含坐标轴的刻度标签，默认是false，就会被隐藏，true的话就设置为0也能看见

5.xaxis 坐标轴

只有top和bottom

data就是坐标轴的内容 1月。。。。

sxisline 点画线什么的

splitline 就有分割线了，背景是网格的，就是会显示竖的线，在每一个点上，可以设置颜色

6.series数据项

type就是各种类型的图 柱状图 饼图

smooth 是否平滑曲线显示，false就变成了折线直线

7.toolbox 工具盒

属性feature里有一个属性saveasimage {}就会以图片保存

柱状图案例

<script>
    //初始化
    var myChart=echarts.init(document.querySelector('div'))
    //配置
    var option = {
        title:{
            text:"2021全学科薪资走势",
            textStyle:{
            fontSize:24
            },
            left:10,
            top:10
        },
        grid:{
            left:"30px",
            top:"60px"
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月','4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine:{
            show:true,
            lineStyle:{
                type:"dashed",
                color:"#ccc"
            },
            axisLabel:{
                show:true,
                color:"#333"
            },
            },
        },
        color:[
            {
            type:"linear",
            x:0,
            y:0,
            x2:1,
            y2:1,
            colorStops:[{
                offset:0,color:'blue'
            },{
                offset:1,color:'red'
            }],
            global:false
            }
            ],
        yAxis: {
            type: 'value',
            splitNumber:5,
            splitLine:{
            lineStyle:{
                color:"#ccc",
                type:"dashed"
            }
            }
        },
        series: [
            {
            data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330],
            type: 'line',
            smooth: true,
            symbol:"emptyCircle",
            symbolSize:10,
            lineStyle:{
                width:5
            },
            areaStyle:{
                color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                {
                    offset: 0, color:'rgba(155,244,255,0.8)' // 0% 处的颜色
                }, 
                {
                    offset: 0.8, color:'rgba(155,244,255,0.1)'// 100% 处的颜色
                }, 
                {
                    offset: 1, color:'rgba(155,244,255,0)'// 100% 处的颜色
                }
                
                ],
                global: false // 缺省为 false
            }
            }
            }
        ]
        };
        
    //显示
    myChart.setOption(option)

饼图案例

//初始化
    var myChart=echarts.init(document.querySelector('div'))
    //配置
    var option = {
  title:{
    text:"班级薪资分布",
    top:10,
    left:10,
    textStyle:{
    fontSize:20
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  color:['red','yellow','blue','green','pink'],
  series: [
    {
      name: '班级薪资分布',
      type: 'pie',
      radius: ['50%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 4
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 200, name: '1万以上' },
        { value: 735, name: '1-1.5万' },
        { value: 580, name: '1.5-2万' },
        { value: 484, name: '2万以上' }
      ]
    }
  ]
};
    

    //显示
    myChart.setOption(option)