Echars基本知识

基础架构

基本表

常用的基础名词

基本表

大概步骤

    第一步、 引入Echars
    第二步、 初始化Echars
    第三步、 准备Data
    第四步、 设置Option

echars基本模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts图表</title>
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
</body>
<script>
    var myChart=echarts.init(document.getElementById('main'))
    var option={
    legend:{
        padding:10,
        itemGap:10,//图例间隔
        data:['邓艳波','杨国娥']//legend的data值要和series的对象的每个name 值相对应,不然不出来lenend
    },
        tooltip:{//悬浮的时候提示框
        trigger:'item'//触发方式
    },
    xAxis:{
        type:'category',//什么类型的,比如数值?
        data:['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis:{
        type:'value',
        boundaryGap:[0.1,0.1],//类目起始和结束两端空白策略,见下图,默认为true留空,false则顶头
        splitNumber:4,//数值的分割段数,不指定的时候根据最大值最小值进行划分
    },
    series:[
        {
            name:'邓艳波',//系列名如启用legend,该值将被legend.data索引相关
            type:'line',//折线图
            data:[112,23,45,56,233,343,454,89,343,123,45,76]
        },
        {
            name:'杨国娥',//系列名
            type:'line',//折线图
            data:[54,543,23,322,33,63,111,222,23]
        }
    ]
    }
    myChart.setOption(option)
 </script>
</html>

基本标记知识

titile

    text: ""       后面分号加文字在最上面显示他的标题
        text: "某地区蒸发量和降水"

    subtext: ""        -->添加副标题

tooltip

    tooltip: {               --->鼠标放图上显示的小框
        trigger: "axis"      --->定义鼠标放上去的样式(默认item)
                                    axis --> 不需要放到图形(轴)上既可以
                                    itme --> 必须放到图形(轴)上才显示
        formatter: "{a} <br/>{b} : {c} ({d}%)"         -->a(系列名称,即series)
                                                     -->b(数据项名称,即)
                                                     -->c(数值)
                                                     -->d(饼图:百分比,雷达图:指标名称)

  散点图axisPointer: {                                 -->为鼠标加线
            type: "cross",                             -->默认为line 可选 line(),cross(十字交叉),shadow(阴影),none(无)
            lineStyle: {
                type: "dashed",                         -->虚线
                width: 1
            }
        }    
    }

legend

    legend:{                           ---> 图例,
        data: ["蒸发量","降水量"],    ---> 
    }

toolbox

    toolbox:{                            -->只右上角的工具箱
        show: true,                     -->把其显示出来
        feature: {                        
            mark: {                         
                show: tru e
            },
            dataView: {                    -->显示出数据视图                
                show: true,                -->将这个功能开启
                readOnly: true                    -->将数据的显示设置为只读
                lang: ['数据视图','关闭','刷新']
            },
            magicType: {                -->可以转换图表格式
                show: false,            
                type: ["line","bar"]    -->设置想转换的图表格式
            },
            restore: {                    -->刷新还原按钮
                show: true
            },
            saveAsImage: {                -->保存为图片格式
                show: true
            }

            orient: 'horizontal'        -->工具栏布局方式,默认水平布局
                                        -->     horizontal    水平
                                        -->      vertical    垂直
        }
    }

calculable

    calculable: true                     -->实现拖拽重新混合计算

xAxis

    xAxis:[
        {
             type:'category',            -->什么类型的,比如数值?
             data:['周一','周二','周三','周四','周五','周六','周日']         //data -->x轴的空行值

             boundaryGap: false         -->类目起始和结束两端空白策略,默认为true留空,false则顶头 及图像在坐标轴的两端会不会有点空余
             percision: 2                 -->标签中数值的小数点的精度
             scale: true                -->是否脱离 0 值比例
         },
    ]

yAxis

    yAxis: [
        {
            type: "value"       
        }
    ]

series

    series:[
             {
                 name:'蒸发量',                -->如果上面legend设置了两者必须相同
                 type:'line',                -->设置这一块内容的图形格式
                 data:[112,23,45,56,233,343,454,89,343,123,45,76]

                 data -->想要形成的数据
             },
             {
                 name:'降水量',
                 type:'line',             
                 data:[54,543,23,322,33,63,111,222,23]

                 yAxisIndex: 1,                -->yAxis坐标轴为数组从0开始当有2个及以上是需要用这条语句来指定
             }
         ]


    series: [{
        radius: ['50%','70%']                -->饼状图,设置内半径和外半径
    }]

dataZoom

    dataZoom: {                                -->进行数据区域缩放
        show: true
        realtime: true                        -->实时检查不兼容则强制不显示    
        start: 20                            -->开始20%
        end: 80

    }

polar 雷达图特有的

    polar:[                                    -->极坐标
        {
            indicate:[                        -->雷达指标列表,只是个边框不是真正的数据
            {
                text: "销售",                -->即最边沿的字为销售
                max: 6000,                    -->即到达外边最大为6000
                min: 0                        -->即最内侧为0
            }
            ]
        }
    ]

    data 里的数据需要和极坐标是一一对应的

地图特有的一点

需要加载一个China.js的文件

    dataRange:{                                -->生成一个可调节的数据框(可以根据他的范围确定显示数据的范围)
        min: 0,                                -->数据可调最小为0
        max: 2500,                            -->数据可调最大为2500
        text: ["高","低"],                    -->生成两个调试文本,

    }

    series: [
        {
            name: "iphone3",
            type: "map",
            mapType: "北京",                -->地图类型,支持world,china及全国34个省市自治区,省市自治区的可以直接写中文
            roam: false,                    -->是否开启滚动缩放和拖拽漫游,默认为false,true开启,scale仅开启滚轮漫游,move仅开启拖拽漫游
            mapValueCalculation: "sum"        -->地图数值计算方式,默认为和即sum ,average为均值
            itemStyle: {                    -->开图的一些功能    
                normal:{
                    lable: {
                        show: true            -->开启标签视觉引导线
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            data:[                            -->数据的书写根其他的差不多
            {
                name: "北京",
                value: 230
            }
            ]

        }
    ]

高级点的知识

    echarts.comments([mychart1,mychart2]); 
    将mychart1图表跟mychart2图表进行关联
详细请看echars官方文档

爱学习爱生活