2021-08-12

暑假学习3

可视化库
项目运行
启动后端工程
1.cd koa2-server
2.npm install
3.Node app.js
Echarts的基本使用
特点
1.开源免费
2.功能丰富
3.社区活跃

2.1 Echarts快速上手

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '第一个 ECharts 实例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {//类目轴 x轴
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},//数值周，不需要设置data属性，在series中进行查找 y轴
        series: [{
            name: '销量',
            type: 'bar', //bar是柱状图，type属性决定图标类型
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

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

Echarts常用图表

通用配置
1.Title：
文字样式
Tooltop：
触发类型：trigger

atem移入到区域内部，axixs坐标轴

触发时机：tiggeron

Mouseover click

格式化：formatter

回调函数
Formatter：funcation(){

}利用formatter的回调函数使重要区域内的函数值以弹出框的形式得以呈现

呈现提示框
3.1toolbox
是一个对象
toolbox:{
feature:{
saveAsImage:{},//保存图片
dataView:{},//可视化图
restore:{},//重置
dataZoom:{},//区域缩放
magicType:{//不同图标的切换
type:[‘bar’,‘line’]
},
}

Legend：图例，用于筛选系列，与series配合使用
legend: {
data:[‘销量’,‘你好’]
},
series: [{
name: ‘销量’,
type: ‘bar’,
data: [5, 20, 36, 10, 10, 20]
},
{
name: ‘你好’,
type: ‘bar’,
data: [51, 10, 26, 20, 20, 23]
}
],

折线图
基本格式与柱状图相同，唯一不同的是series中的type设置为line。
Smooth：true 变为平滑
Linestyle设置样式，放在series与smooth同级
lineStyle:{
color:‘red’,
type:‘dashed’

            }

填充风格
areaStyle:{
color:‘pink’
}
紧挨边框：x轴设置
xAxis: {
boundaryGap:false}
缩放：脱值比例，设置给y轴
yAxis: {
type:‘value’,
scale:‘true’}
堆叠图

散点图：推测数据之间的相关性 scatter
脱离零值比例 scale：true
常见效果
散点大小：symnolsize
散点颜色：itemStyle.color

涟漪动画效果 type：effectscatter
Showeffection

直角坐标系的常用配置
直角坐标系图标：折线图，散点图，柱状图
配置1：grid 控制直角坐标系的
grid:{
show:true,

        },

配置2：坐标轴axis 最多分为y轴和x轴
Type：value 读取数据
Type：catelogue 分类别
显示位置position 在x y中设置left。。。

配置2：

3.4饼图：直观观察出每个数值的占比情况
没有x轴 y轴

圆环半径：Radius设置百分比 宽度高度中较小的一部分参考的一部分
Radius：[‘1’,’2’]
我们也可以通过设置参数 roseType: ‘angle’ 把饼图显示成南丁格尔图。
itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等：
itemStyle: { normal: { shadowBlur: 200, shadowColor: ‘rgba(0, 0, 0, 0.5)’ }

3.5 地图
$.get(‘json/map/china.json’, function (ret){
//ret就是中国的各个省份的矢量地图数据console. log(ret)echarts.registerMap(‘chinaMap’, ret)
var option = {geo:{type:‘map’,map:‘chinaMap’, // chinaMap需要和registerMap中的第一个参数保持一致
roam:true,//设置允许缩放以及拖动的效果
label:{show: true //展示标签
series:[data: airData,geoIndex:0，//将空气质量的数据和第0个geo配置关联在一起
type:'map’visualMap:{
min:0.max:300,
inRange:{color: [‘white’, ‘red’]//控制颜色渐变的范围},
ralclahle.true//出现滑块
常见效果
**地图和散点图结合
1.给series下增加新的对象
2.准备好散点数据,设置给新对象的data
3.配置新对象的type
type:effectScatter
4.让散点图使用地图坐标系统
coordinateSystem: ‘geo’,
5.让涟漪的效果更加明显
rippleEffect:{
scale:10
}
data: scatterData,//配置散点的坐标数据
type: ‘effectScatter’,
coordinateSystem: ‘geo’，//指明散点使用的坐标系统geo的坐标系统rippleEffect: {
scale: 100}//设置涟漪动画缩放比例