echart使用的自我总结

Posted 2020-12-12 nixige

1.echart下载

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

• 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
• 在 ECharts 的 GitHub 获取。
• 通过 jsDelivr 等 CDN 引入
  我是从官网下载的

2. 中国地图的引入

我们结对作业是引入的中国地图，所以用中国地图做例子

这是项目构成

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

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