轻松使用网页版echarts图表

最新推荐文章于 2024-06-18 17:20:40 发布

昼月眠

最新推荐文章于 2024-06-18 17:20:40 发布

阅读量2.6k

点赞数

文章标签：前端 echarts

本文链接：https://blog.csdn.net/xiuxiuxiu555/article/details/123809389

版权

1.介绍和安装 echarts

echarts是最常见的图表工具一个基于JavaScript的开源可视化图表库

Apache ECharts 提供了多种安装方式

下面给大家介绍一种最简单的网页应用方式

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件

2.使用 echarts

在HTML中引入js文件就可以轻松使用了

option 选项

标题 title:{}

图例 lenght:()

提示 tooltip:{}

x轴线 xAxis：{}

y轴线 yAxis：{}

数据 series：[]

下面给大家写几个实例

1.柱形图+线形图+饼状图

<!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 echart = echarts.init(document.getElementById("container"),'purple-passion');

var option = {

title:{

text:"vue考试分析图"

},

legend:{data:["成绩","平均成绩","80分以上人数"]},

toolbar:{},

yAxis:{},

xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]},

series:[

{type:"bar",data:[90,60,33,88,99],name:"成绩"},

{type:"line",data:[88,66,55,77,48],name:"平均成绩",smooth:true},

{type:"line",data:[10,20,15,6,3],name:"80分以上人数",smooth:true,areaStyle:{color:"#f70"}},

{

type:"pie",

data:[{name:"选择题",value:50},{name:"填空题",value:20},{name:"问答题",value:30},{name:"判断题",value:10}],

name:"题型",radius:["10%","30%"],

top:"-50%",

left:"10%"

}

]

}

echart.setOption(option)

</script>

</body>

</html>

效果图如下

堆叠图

<!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>