echart使用的自我总结

1.echart下载

你可以通过以下几种方式获取 ECharts。

2. 中国地图的引入

我们结对作业是引入的中国地图,所以用中国地图做例子
echart使用的自我总结
这是项目构成

1、首先给定一下全局样式、给个地图容器

<style>
    *{margin:0;padding:0}
    html,body{
        width:100%;
        height:100%;
    }
    #main{
          width:800px;
          height:600px;
          margin: 150px auto;
          border:1px solid #ddd;
      }
    /*建议长宽比0.75,符合审美*/
</style>
<div id="main">
</div>

2、获取容器DOM,给定地图配置

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

3、详细配置,定制样式,给自定义事件

option = {
        tooltip: {
                formatter:function(params,ticket, callback){
                    return params.seriesName+'<br />'+params.name+':'+params.value
                }
            },
        visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],
            inRange: {
                color: ['#e0ffff', '#006edd']
            },
            show:true
        },
        geo: {
            map: 'china',
            roam: false,
            zoom:1.23,
            label: {
                normal: {
                    show: true,
                    fontSize:'10',
                    color: 'rgba(0,0,0,0.7)'
                }
            },
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                    areaColor: '#F3B329',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series : [
            {
                name: '信息量',
                type: 'map',
                geoIndex: 0,
                data:dataList
            }
        ]
    };

tooltip:定制信息提示框的内容,其中params参数表示数据

数据格式:

var dataList=[
        {name:"南海诸岛",10},
        {name: '北京', 90},
        {name: '天津', 120},
        {name: '上海', 230}
        ]

visualMap:图注样式定制,其中包括color范围,文字提示

geo:定义地图为china,其中可能大概率要用的一个配置zoom: 视角缩放比例,roam:是否开启缩放和平移
itemStyle:地图外观定制,其中normal表示正常显示的样式,emphasis表示鼠标悬浮下样式
series:整体配置 其中type很关键 表示该例是地图,data:图表所用数据,实际项目中大家可以通过http获取数据,再赋值给data

这样大概地图就完成了,我懂的不是很多,就大概写一下,

上一篇:技术学习博6


下一篇:纯html加css的键盘UI效果图