echarts是最常见的图表工具一个基于Javascript的开源可视化图表库
Apache ECharts 提供了多种安装方式
下面给大家介绍一种最简单的网页应用方式
2.使用 echarts在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js,点击并保存为 echarts.js 文件
在HTML中引入js文件就可以轻松使用了
option 选项
标题 title:{}
图例 lenght:()
提示 tooltip:{}
x轴线 xAxis:{}
y轴线 yAxis:{}
数据 series:[]
下面给大家写几个实例
1.柱形图+线形图+饼状图
document
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)
效果图如下
堆叠图
// 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);
效果图如下



