2021-08-15 暑假学习4

3.6雷达图：多个维度数据与标准数据的对比情况
实现步骤
1.ECharts最基本的代码结构:
引入js文件,DOM容器,初始化对象,设置option、
2.定义各个维度的最大值
indicator:[ { name: ‘易用性’,max: 100},……]
3.准备具体产品的数据
data:[ {name: ‘华为手机1’，value: [80,90,80,82,90] }，… ]
4.图表类型∶
在series下设置type:radar

常见效果
Label：{
Show：true}
areaStyle：{}//将被一个产品雷达图形形成阴影的面积
radar: {
indicator: dataMax，//配置各个维度的最大值
shape: ‘circle’//配置雷达图最外层的图形
}

3.7仪表盘：进度的监控以图标的箱况展示出来

实现步骤
1.ECharts最基本的代码结构:
引入js文件,DOM容器,初始化对象,设置option
2.准备数据,设置给series下的data
data:[{value:97}]
3.图表类型:
在series下设置type:gauge

3.8图表小结

使用场景
●柱状图:柱状图描述的是分类数据，呈现的是每一个分类中有多少
折线图:折线图常用来分析数据随时间的变化趋势
散点图:散点图可以帮助我们推断出不同维度数据之间的相关性
心
饼图:饼图可以很好地帮助用户快速了解不同分类的数据的占比情况
地图:地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
雷达图:雷达图可以用来分析多个维度的数据与标准数据的对比情况
仪表盘:仪表盘可以更直观的表现出某个指标的进度或实际情况

主题使用
内置主题
ECharts中默认内置了两套主题:light dark在初始化对象方法init中可以指明
var chart = echarts.init(dom, ‘light’);
var chart = echarts.init(dom, ‘dark’);
自定义主题

echarts.registerTheme( ’ itcast’, {
“color” : [
“#893448”,"#d95850","#eb8146","#ffb248","#千2d643","#ebdba4"
]

RegisterMap
注册地图数据
$.get(‘json/map/china.json’,function (chinajson) {
echarts.registerMap(‘china’, chinajson);
});
geo组件使用地图数据
var option = {
geo: {
type: ‘map’,map: ‘china’,},
心
});

Connect：多个图表进行关联
每一个图标对应一个echarts实例对象
echarts. connect([mCharts, mCharts2])//将柱状图和地图关联起来

setOption方法
设置或修改图表实例的配置项以及数据·
多次调用setOption方法
合并新的配置和旧的配置增量动画
resize方法
重新计算和绘制图表
一般和window对象的resize事件结合使用
window.onresize = functio(){
myChart.resize();
}

3.2 echartslnstance对象
on\off 方法
绑定或者解绑事件处理函数鼠标事件
常见事件: ‘click’、‘dblclick’. ‘mousedown’、‘mousemove’、'mouseup’等事件参数arg:和事件相关的数据信息
ECharts事件
常见事件: legendselectchanged、 ‘datazoom’、 ‘pieselectchanged’、 'mapselectchanged’等事件参数arg:和事件相关的数据信息
演示
mCharts.on( 'click ’ , function(arg){console.log(arg)
console.log( ‘click. …’)})//对事件进行监听I
mCharts.off( 'click ')//解绑click的事件
mCharts.on( ’ legendselectchanged ’ , function(arg){console.log(arg)
console.log( ’ legendselectchanged ')})

dispatchAction方法
触发某些行为
使用代码模拟用户的行为
mCharts.dispatchAction({
type: ‘highlight’,//事件类型
seriesIndex: 0,//图表索引
datalndex: 1//图表中哪一项高亮
});

$( ‘#btn1’ ).click(function(){//模拟用户的行为
mCharts.dispatchAction( {
type:‘highlight’
seriesIndex: 0,//控制系列索引
dataIndex: 1//控制数据的索引
})
})
Clear方法
$( ‘#btn2 ’ ).click(function(){//清空图表的实例
mCharts.clear()})
$(’#btn3 ’ ).click(function(){
I
//重新设置optionl
mCharts.setOption(option)})
Dispose方法：销毁后实例无法再进行使用
mCharts. Dispose( )