标签：京东 sel 全局 变化 edm att pre 使用 配置
样式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 800px"></div>
</body>
</html>
<script>
var mcharts=echarts.init(document.querySelector(‘div‘),‘light‘)
var pdata=[
{
name:‘淘宝‘,
value:1222,
itemStyle:{
color:‘blue‘
},
label:{
color:‘green‘
},
emphasis:{
itemStyle: {
color:‘pink‘
}
}
},
{
name:‘京东‘,
value:3233
},
{
name:‘唯品会‘,
value:3234
},
{
name:‘助课宝‘,
value:4345
},
{
name:‘灵通‘,
value:8888
}
]
var option={
//全局的调色盘会覆盖主题的调色盘
color:[
‘red‘,‘green‘,‘blue‘,‘pink‘,‘yellow‘
],
series:[
{type:‘pie‘,
name:‘消费‘,
data:pdata,
label:{
show:true,
formatter:function (arg) {
return arg.name+""+arg.value+"-"+arg.percent+"%";
}
},
//radius:20,//饼图半径
//radius:20%,//参照容器的宽度与高度较小的一部分设置
//radius:[‘50%‘,‘70%‘]
//roseType:‘radius‘,//南丁格尔图，随数值大小变化
//selectedMode:‘single‘//偏离原点一定距离
//selectedMode:‘multiple‘
}
]
}
mcharts.setOption(option)
</script>
图表自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.引入echatrs.min.js文件-->
<script src="echarts.min.js"></script>
</head>
<body>
<!--2.准备一个装图表的盒子-->
<div style="height: 400px"></div>
<!--初始化echarts实例对象-->
<script>
//3.初始化eharts实例对象
var mcharts=echarts.init(document.querySelector(‘div‘));
//4.准备配置项
var option={
xAxis:{
type:‘category‘,//类目轴
data:[‘xiaoming‘,‘xiaohong‘,‘xiaowang‘]
},
yAxis:{
type:‘value‘//数值轴
},
series:[
{
name: ‘语文‘,
type: ‘bar‘,
data: [70, 94, 110]
}
]
}
//5.配置项给echarts对象
mcharts.setOption(option);
//监听window大小窗口变化的事件
window.onresize=function () {
mcharts.resize()
}
//window.onresize=mcharts.resize
</script>
</body>
</htm
标签：京东 sel 全局 变化 edm att pre 使用 配置
原文地址：https://www.cnblogs.com/zhanghua-lijie/p/14910067.html
