目录
1.ECharts简述
- JavaScript的图表库
- 百度捐给apache基金会
- 比较符合中国人习惯
- HeightCharts , D3为同行
2. ECharts常用图表类型
type:"bar"是柱状图
type:"line"是折线图
type:"pie"是饼图
3.ECharts的使用及引入
Apache ECharts 支持多种下载方式，可以在下一篇教程安装中查看所有方式。这里，我们以从 jsDelivr CDN 上获取为例，介绍如何快速安装。
在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
关于这些文件的介绍，可以在下一篇教程安装中了解更多信息。
引入 Apache ECharts
在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。
4.用ECharts简单实现一个柱形的成绩统计表
话不多说，直接开整
<!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: "成绩"
}
]
}
// 03 更新option
echart.setOption(option);
</script>
</body>
</html>经过上面的几个步骤的演示我们就可以保存在我们的浏览器上运行了
代码效果如下
5.ECharts实现多个图表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.min.js"></script>
<!-- <script src="./js/essos.js"></script> -->
</head>
<body>
<div id="container" style="width: 800px;height: 600px;">
</div>
<script>
// 01 创建实例
//主题颜色：默认 dark深色 light 亮色
var echart = echarts.init(document.getElementById("container"), 'essos');
// 02 设置option参数
var option = {
title: {
text: "vue考试成绩分析图" //标题
},
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图例保持一致
{
type: "bar",
data: [90, 60, 33, 88, 99],
name: "成绩"
},
// line 平均成绩 smooth 平滑
{
type: "line",
data: [88, 66, 55, 77, 48],
name: "平均成绩",
smooth: true
},
// areaStyle 面积
{
type: "line",
data: [10, 20, 15, 6, 3],
name: "80分以上人数",
smooth: true,
areaStyle: {
color: "#f70"
}
},
// 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>代码案例效果
6.用ECharts实现堆叠图
<!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>
案例效果‘
7.用ECharts实现图标的特殊样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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, 111, 222, 1)' // 0% 处的颜色
}, {
offset: .7,
color: 'rgba(27, 111, 45,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>案例效果
版权声明：本文为Mr_krab原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。