【高级课程笔记】—— Echarts入门&常用组件

官网

一、浏览器画图方式有两种

  • canvas ：点阵图，缩放失真，适合图形数量非常大的图表
  • svg：矢量图，缩放不失真，适合图形数量较少的图表

 

二、echarts 的绘图步骤

  1. 建立dom 容器
  2. 引入 ECharts
  3. 实例化echarts
  4. 建立图表配置项
  5. 显示图表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速上手</title>
    <style>
        #main{
            height: 500px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="../js/echarts.min.js"></script>
<script>
    /*基于准备好的dom，初始化echarts实例
    * echarts.init(dom)
    * */
    const myChart=echarts.init(document.getElementById('main'));

    /*指定图表的option 配置项和数据
    * title 标题 {}
    *   text 主标题
    * xAxis x轴 {}
    *   data 类目数据
    * yAxis y轴 {}
    * series 系列列表 [系列，...]
    *   系列
    *       type 图表类型
    *       data 数据，与xAxis.data 相对应
    * */
    const option={
        title:{
            text:'主标题'
        },
        xAxis: {
            data:['html','css','js']
        },
        yAxis: {},
        series:{
            type:'bar',
            data:[30,20,40]
        }
    };

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

</script>
</body>
</html>

 

三、常用组件

  • 标题 title
  1. 主标题 text
  2. 副标题 subtext
  3. 位置 left
  4. 主标题样式 textStyle
  5. 副标题样式 subtextStyle
  6. 可见性 show

  • 图例 legend

  1. 图例legend 适用于不同系列的数据过滤，它需要与series 搭配使用。

  • 工具栏 toolbox

  1. 保存图片 saveAsImage

  2. 配置项还原 restore

  3. 数据视图工具 dataView

  4. 数据区域缩放 dataZoom

  5. 动态类型切换 magicType

  • 提示框 tooltip

        提示框触发方式 trigger：

  1. item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。
  2. axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
  3. none 什么都不触发

  • 坐标轴 xAxis yAxis

  1. name 坐标轴名称
  2. data 类目数据

         y 轴的分割设置：

  1. splitNumber 分割段数
  2. interval 强制设置坐标轴分割间隔
  3. minInterval 坐标轴最小间隔
  4. maxInterval 坐标轴最大间隔

  • 系列列表 series

  1. 列表类型 type
  2. 系列名 name ：用于提示tooltip，图例legend 筛选，数据更新
  3. 数据 data
  4. 标记点 markPoint
  5. 标记线 markLine

  • 标记点 markPoint

  • 标记线 markLine 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <style>
        #main{
            margin: 20px;
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="../js/echarts.min.js"></script>
<script>
    /*基于准备好的dom，初始化echarts实例*/
    const myChart = echarts.init(document.getElementById('main'));

    /*指定图表的配置项和数据*/
    const option = {
        /*标题 title {}
        *   主标题 text
        *   副标题 subtext
        *   位置 left
        *       left 左对齐
        *       right 右对齐
        *       center 矩阵
        *   主标题样式 textStyle
        *       color
        *       fontSize
        *   副标题样式 subtextStyle
        *       color
        *       fontSize
        *   show 可见性
        *       true 可见，默认
        *       false 不可见
        * */
        title:{
            text:'主标题',
            subtext:'副标题',
            left:'left',
            textStyle:{
                color:'maroon',
                fontSize:24
            },
            subtextStyle:{
                color:'#333',
                fontSize:16
            },
        },


        /*绘图区 grid
        *   left right bottom right 绘图区在容器内的边距
        * */
        grid:{
            top:90,
            right:90
        },


        /*图例 legend
        *   data[] 图例的数据,每一项代表一个系列的 name
        * */
        legend:{
            data:['学习人数','就业人数']
        },

        /*工具栏 toolbox
        *   feature{} 工具配置项
        *     saveAsImage{} 保存为图片
        *     dataView{} 数据视图工具
        *     restore{} 配置项还原
        *     dataZoom{} 数据区域缩放
        *     magicType{} 动态类型切换
        *       type[] 动态类型
        *           line 折线图
        *           bar 柱状图
        *           stack 堆叠
        *           tiled 平铺
        * */
        toolbox:{
            feature:{
                saveAsImage: {type:'jpg'},
                dataView:{},
                restore:{},
                dataZoom:{},
                magicType:{
                    type:[
                        'line',
                        'bar',
                        'stack',
                        'tiled'
                    ]
                }
            },

        },


        /*提示框 tooltip
        *   trigger 提示框触发方式
        *       item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        *       axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
        *       none 什么都不触发
        * */
        tooltip:{
            trigger:'axis'
        },



        /*x 轴
        *   name 坐标轴名称
        *   data 类目数据 []
        * */
        xAxis:{
            name:'前端语言类型',
            data:['html','css','js']
        },

        /*y 轴
        *   name 坐标轴名称
        *   splitNumber 分割段数
        *   interval 强制设置坐标轴分割间隔
        *   minInterval 坐标轴最小间隔
        *   maxInterval 坐标轴最大间隔
        * */
        yAxis:{
            name:'人数',
            // splitNumber:9,
            // interval:5,
            // minInterval: 20,
            // maxInterval: 5,
        },


        /*系列列表 series
        *   列表类型 type
        *   系列名 name ：用于提示tooltip，图例legend 筛选，数据更新
        *   数据 data []
        *   标记点 markPoint {}
        *       data [] 标记的数据数组
        *           {type:'max'} 最大值
        *           {type:'min'} 最小值
        *           {value:'值',coord:[x,y]} 坐标位
        *   标记线 markLine
        *       data 标记的数据数组
        * */
        series:[
            {
                name:'学习人数',
                type:'bar',
                data:[30,20,40],
                markPoint:{
                    data:[
                        {type:'max'},
                        {type:'min'},
                        {coord:[0,30],value:30},
                    ]
                }
            },
            {
                name:'就业人数',
                type:'bar',
                data:[33,40,70],
                markLine:{
                    data:[
                        {name:'平均线',type:'average'}
                    ]
                }
            }
        ]

    };

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

 注：课程来自开课吧 

posted @ 2021-10-19 16:28  柳洁琼Elena  阅读(228)  评论(0)  编辑  收藏  举报