ECharts快速上手 入门教学
ECharts官网网址：Apache EChartsECharts 是一个制作图表的javascript库首先引入echarts
·
ECharts官网网址：Apache ECharts
ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。
首先引入echarts
<script src="./js/echarts.min.js">绘制一个基础图表
创建一个Dom容器
<div id="container" style="width: 800px;height: 600px;"></div>1.创建实例
var echart = echarts.init(document.getElementById("container"));2.设置option参数
var option = {
title: {
text: "vue成绩分析图"
},
legend: {
data: ["成绩"]
},
tooltip: {},
xAxis: {
data: ["一", "二", "三", "四"]
},
yAxis: {},
series: [{
type: "bar",
data: ["80", "90", "70", "100"],
name: '成绩'
}]
}3.更新option
echart.setOption(option);这样一个简单的图表就创建成功了，你可以自己动手看一下效果哦。
颜色样式控制
主题
echarts的主题分为默认，dark深色主题和light浅色主题
自定义主题
去官网-资源-主题构建工具配置，配置好以后下载
使用 echarts.init(dom, 'customed') 创建图表，第二个参数即为 *.js 文件中注册的主题名字。
var echart = echarts.init(document.getElementById("container"),'chalk');color调色盘
调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 默认为：
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']特殊样式
lineStyle:{width:"10px",cap:"rouned"}
10像素，端点平滑
itemStyle:{borderRadius:[100,100,100,100],}
//圆角，左上，右上，右下，左下
渐变色
var mycolor1 = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(17, 255, 164, 0.7)' // 0% 处的颜色
}, {
offset: .7, color: 'rgba(203, 249, 102, 0.0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 600px;"></div>
</body>
<script type="text/javascript">
var mycolor1 = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(17, 255, 164, 0.7)' // 0% 处的颜色
}, {
offset: .7, color: 'rgba(203, 249, 102, 0.0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
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 echart = echarts.init(document.getElementById("container"),"dark");
//定义选项
var option = {
title: {
text: "特殊样式"
},
tooltip: {},
legend: {
data: ["线","柱状图"]
},
xAxis: {
data: ["一", "二", "三", "四"]
},
yAxis: {},
series: [
{
name: "线",
type:"line",
data: [10, 80, 55, 90],
smooth: true,
lineStyle:{width:10,cap:"round"},//line的样式 cap端点类型
areaStyle:{color:mycolor2}
},
{
name:"柱状图",
type:"bar",
data:[10,20,30,40],
itemStyle:{borderRadius:[100,100,0,0],color:mycolor1},
//圆角 坐上，右上 ，右下，坐下
}
]
}
//3 更新option
echart.setOption(option);
</script>
</html>效果为：
堆叠图
精华：
name: "java",
type:"bar",
data: [100, 120, 90, 118],
stack: true,
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 600px;"></div>
</body>
<script type="text/javascript">
//初始化
var echart = echarts.init(document.getElementById("container"),"dark");
//定义选项
var option = {
title: {
text: "堆叠图"
},
tooltip: {trigger:"axis"},//axis轴线，item元素
legend: {
data: ["ui","java","web","phthon"]
},
xAxis: {
},
yAxis: {
data: ["2019", "2020", "2021", "2022"]
},
label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
series: [
{
name: "ui",
type:"bar",
data: [120, 80, 70, 90],
stack: true,
label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
},
{
name: "java",
type:"bar",
data: [100, 120, 90, 118],
stack: true,
},
{
name: "web",
type:"bar",
data: [180, 156, 99, 110],
stack: true,
},
{
name: "python",
type:"bar",
data: [78, 172, 120, 48],
stack: true,
itemStyle:{borderRadius:[0,100,100,0]},
},
]
}
//3 更新option
echart.setOption(option);
</script>
</html>效果为：
富文本
label:{
show:true,
position:"center",
formatter:"{big|{d}}{small|%}\n{b}",//a 系列名称，c 数据值, d百分比
rich:{
big:{fontSize:"36px",fontWeight:900},
small:{fontSize:"12px",color:"#00aaff"},
}
}完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 600px;"></div>
</body>
<script type="text/javascript">
var echart = echarts.init(document.getElementById("container"))
var option = {
title: {
text: "网站访问来源"
},
tooltip: {},
series: [{
type: "pie",
name: "来源",
radius: ["20%", "50%"],
data: [{
value: 120,
name: "百度",
label:{
show:true,
position:"center",
formatter:"{big|{d}}{small|%}\n{b}",//a 系列名称，c 数据值, d百分比
rich:{
big:{fontSize:"36px",fontWeight:900},
small:{fontSize:"12px",color:"#00aaff"},
}
}
},
{
value: 90,
name: "搜狗",
label:{show:true}
},
]
}]
};
//3 更新option
echart.setOption(option);
</script>
</html>
map地图
<!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>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)