一：最终结果
最终效果图一：条形图
最终效果图二：折线图
最终效果图三：竖条形图
二：运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
var myChar=echarts.init(document.getElementById("main"));
var option={
title:{
text:'狗熊岭',
subtext:'来源于“是我是我”'
},
tooltip:{
trigger:'axis',
},
legend:{
data:['语文','数学','英语','体育'],
icon:'circle',
},
toolbox:{
show:true,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:['line','bar']},
restore:{show:true},
saveAsImage:{show:true},
},
},
xAxis:[
{
type:'value',
boundaryGap:[0,0.5],
},
],
yAxis:[
{
type:'category',
data:['光头强','熊大','熊二',"翠花"],
},
],
series:[
{
name:'英语',
type:'bar',
data:[80,66,75,69,],
markPoint:{
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label :{
show: true,
color:'#255',
position: "top"
},
barWidth: '20%',
},
{name:'语文',
type:'bar',
data:[94,102,101,89],
markPoint:{
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label :{
show: true,
color:'#255',
position: "top"
},
barWidth: '20%',
},
{name:'数学',
type:'bar',
data:[91,99,106,80],
markPoint:{
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label :{
show: true,
color:'#255',
position: "top"
},
barWidth: '20%',
},
],
};
myChar.setOption(option)
</script>
</body>
</html>
三：框架介绍
整个项目由头，身体和尾部组成（可以没有尾部，但不能没有头和身体）
1，头部（head）
头部整体用<head></head>包裹起来，图中第四行是用来设置字符集，第五行为导入脚本文件位置（要注意脚本文件位置填错会导致结果无法显示）
2，身体（body）
身体用<body></body>包裹起来，是最后影响最后结果的关键
图中第八行div为容器，id是容器的编号，style用来设置容器显示大小（身体里可有多个容器）
第九到第十五行是一个整体，属于script
第十五行“option”使结果可视
四：运行代码极其结果的简单讲解
以下图中，text为图中左上角的大标题，subtext为左上角图中小标题
trigger为触发器，显示鼠标指定位置内容
以下为legend data为组件
toolbox为图中右上角工具栏内置代码
这是图中x轴和y轴的设置
以下代码是实现图表中的值
name和data内容可变，可改变显示极其显示的值（可增加，删除，插入，修改）
五：小扩展
两种条形图的转换只需要把x，y轴中的内容对调即可
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
