标签：class etop owa gre line select show color radius
<!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‘))
var option={
series:[
{
type:‘gauge‘,
data:[
{value:99,
itemStyle:{
color:‘red‘,
}
},
{value:66}
],
min:60,
}
]
}
mcharts.setOption(option)
</script>
调色盘的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.min.js"></script>
<script src="mytheme/essos.js"></script>
</head>
<body>
<div style="width: 600px;height: 800px"></div>
</body>
</html>
<script>
var mcharts=echarts.init(document.querySelector(‘div‘),‘essos‘)
var pdata=[
{
name:‘淘宝‘,
value:1222
},
{
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="width: 600px;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],
itemStyle: {
//color: {
//type: ‘linear‘,//线性渐变
//x: 0,
//y: 0,
//x2: 0,
//y2: 1,
//colorStops: [
//{
// offset: 0, color: ‘red‘
// },
// {
// offset: 1, color: ‘yellow‘
// }
// ]
//},
color: {
type: ‘radial‘,//线性渐变
x: 0.5,
y: 0.5,
r:1,
colorStops: [
{
offset: 0, color: ‘red‘
},
{
offset: 1, color: ‘yellow‘
}
]
},
}
}
]
}
//5.配置项给echarts对象
mcharts.setOption(option);
</script>
</body>
</html>
标签：class etop owa gre line select show color radius
原文地址：https://www.cnblogs.com/zhanghua-lijie/p/14910059.html
