轻松使用网页版echarts图表
1.介绍和安装 echarts
echarts是最常见的图表工具一个基于JavaScript的开源可视化图表库
Apache ECharts 提供了多种安装方式
下面给大家介绍一种最简单的网页应用方式
在 选择 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>
