1柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width:800px; height: 600px;"></div>
<script>
// 01 创建实例
var echart = echarts.init(document.getElementById("container"));
// 02 设置option参数
var option = {
title:{
text:"vue考试成绩分析图" //标题
},
legend:{data:["成绩"]}, //图例
tooltip:{}, //鼠标提示
xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]},//x轴线
yAxis:{},//y轴线
series:[ //图数据
// type 类型 // bar柱状图
// data数据
// name 名称注释和legend图例保持一致
{type:"bar",data:[90,60,33,88,99],name:"成绩"},
{type:"line",data:[88,66,55,77,48],name:"平均成绩",somooth:true},
{type:"line",data:[10,20,15,6,3],name:"80分以上人数",somooth:true,areaStyle:{color:'#f70'}},
]
}
// 03 更新option
echart.setOption(option);
</script>
</body>
</html>
运行效果
2 图表类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width:800px; height: 600px;"></div>
<script>
// 01 创建实例
var echart = echarts.init(document.getElementById("container"));
// 02 设置option参数
var option = {
legend: {
data: ["成绩", "平均成绩", "80分以上人数", "题型"]
}, //图例
tooltip: {}, //鼠标提示
xAxis: {
data: ["3.1", "3.2", "3.3", "3.4", "3.5"]
}, //x轴线
yAxis: {}, //y轴线
series: [ //图数据
// type 类型 // bar柱状图
// data数据
// name 名称注释和legend图例保持一致
// pie饼形图
{
type: "pie",
data: [{
name: "选择题",
value: 50
},
{
name: "填空题",
value: 20
},
{
name: "问答题",
value: 30
},
{
name: "判断题",
value: 10
}
],
name: "题型",
radius:["10%","30%"], //半径
top:"-50%", //位置
left:"10%"
},
]
}
// 03 更新option
echart.setOption(option);
</script>
</body>
</html>
运行效果
3 特殊样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px;"></div>
<script>
var mycolor2 = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色
}, {
offset: .7, color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
var mycolor1 = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(23, 135, 255, 1)' // 0% 处的颜色
}, {
offset: .7, color: 'rgba(27, 201, 249,1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
// 01 初始化
var echart = echarts.init(document.getElementById("container"),'dark');
// 02 定义选项
var option = {
title:{ text:"特殊样式"}, //标题
tooltip:{}, //提示
legend:{data:["线","柱状"]}, // 图例
xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]}, //x轴线
yAxis:{}, //y轴线
series:[ // 系列数据
{name:"线",type:"line",data:[50,100,48,68,88],smooth:true,
lineStyle:{width:10,cap:"round"},//线的样式 cap断点类型
areaStyle:{color:mycolor2}//面的样式
},
{name:"柱状",type:"bar",data:[120,220,320,48,100],
itemStyle:{
borderRadius:[100,100,100,100],//圆角，左上，右上 ，右下，左下
color:mycolor1
}
}
]
}
// 03 更新选项
echart.setOption(option);
</script>
</body>
</html>
效果
4堆型图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px;"></div>
<script>
// 01 初始化
var echart = echarts.init(document.getElementById("container"),'dark');
// 02 定义选项
var option = {
title:{ text:"堆叠图"}, //标题
tooltip:{trigger:"axis"},//axis轴线，item元素 //提示
legend:{data:["ui","java","web","python"]}, // 图例
xAxis:{}, //x轴线
yAxis:{data:["2019","2020","2022"]},
label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
series:[ // 系列数据
{name:"ui",type:"bar",data:[120,80,70],stack:true,
// label标签 show显示 position位置,insideRight 内部右侧，formatter格式化
// {a} 系列名称 {b}轴线名称 {c}值
label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
},
{name:"java",type:"bar",data:[27,50,100],stack:true},
{name:"web",type:"bar",data:[180,220,240],stack:true},
{name:"python",type:"bar",data:[200,120,80],stack:true}
]
}
// 03 更新选项
echart.setOption(option);
</script>
</body>
</html>
效果
5 地图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width:1200px; height:800px"></div>
<script src="js/feiyan.js"></script>
<script type="text/javascript">
// 获取省份数据，给每个省份添加name和value执行
var province = data.data.feiyan.provinces.map(val=>({...val,value:val.sure_cnt,name:val.province}));
console.log(province);
var echart = echarts.init(document.getElementById("container"),'dark');
var option= {
title:{text:"地图"},
tooltip:{},
series:[
{name:"china",type:"map",mapType:"china",data:[]}
]
};
// 获取地图
function getMap(obj={en:"china"}){
// 请求数据
fetch("./map/json/province/"+obj.en+".json")
// 转换为json
.then(res=>res.json())
// 获取数据
.then(res=>{
// 注册地图
echarts.registerMap(obj.en,res);
// 更新数据（指定省份数据）
option.series[0].data=province;
// 更新地图类型
option.series[0].mapType=obj.en;
// 更新option渲染
echart.setOption(option);
})
}
getMap();
</script>
</body>
</html>
效果
6 富文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width:800px; height:600px"></div>
<script type="text/javascript">
var echart = echarts.init(document.getElementById("container"),'dark');
var option= {
title:{text:"网站访问来源"},
tooltip:{},
series:[
{type:"pie",name:"来源",radius:["30%","50%"],
data:[
{value:120,name:"百度",label:{
show:true,
position:"center",
// a 系列名称 b数据名称 c数据值 d百分百 big与small在rich定义好的样式
formatter:"{big|{d}}{small|%}\n{b}",
// 定义富文本样式样式
rich:{
big:{fontSize:"36px",fontWeight:900},
small:{fontSize:"12px",color:"#00aaff"}
}
}},
{value:25,name:"其他",label:{show:false}}
]}
]
};
echart.setOption(option);
</script>
</body>
</html>
效果
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
