Echarts
echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
1.echarts语法
title : 标题组件
title: {
text: '标题信息'
}
tooltip : 提示框组件
// 图表的提示
tooltip:{
trigger:"鼠标悬停时的提示信息",
formatter: "提示框浮层内容格式器，支持字符串模板和回调函数两种形式"
},
trigger各个值进行分析：
‘axis’：坐标轴触发，主要在柱状图，折线图等会使用。
'item'：图形形状触发，主要用在散点图、饼图等无类目轴的图标中使用。
'none'：什么都不触发。
legend : 图例组件
// 图例
legend:{
data:['A', 'B', 'C', 'D']
},
xAxis : x轴
// x轴线
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
//type: ‘category’ 的意思是类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
//boundaryGap: false 的意思是分隔线与缝隙。默认为true，这时，刻度只是作为分隔线，标签和数据点都会在两个 刻度 之间的带(band)中间。
yAxis : y轴
// y轴线 不需要修改，会自动根据x轴的数据进行修改。
yAxis:{
type:"value"//可以不写
},
series : 系列列表（重点）
series: [{
barWidth:26,// 柱形宽度（折线图无）
name: '',// legend对应的名称
type: 'bar',// 图形类型
stack: 'TUE',// 若多个值一样，则堆叠到一起
data: [1,1,1,11],// 数值
smooth: true, // 线条平滑展示，折线图起作用
areaStyle: {},// 面积填充,折线图有效
emphasis: {// 高亮
label: {
show: true,
textStyle: {
color: '#333333',
fontWeight: 'bold'
}
}
}
}]
有多少个对象就有多少条线！！！
Type：图标类型 ：bar 柱状图 、line折线图 、pie 饼形图
- line折线图
(1)曲线图
加上smooth:true;就会变成曲线图
(2)面积图
加上areaStyle:{fill:“#f70”} 会变成面积图
- pie饼形图
(1)加上radius:[80,50] 会变成环形图name: 系列名称，用于tooltip的显示，legend的图例筛选变化
stack：数据堆叠。 如果设置相同值，则会数据堆叠。
data:用于绘制图标的数据 必须是一个数组数据
比如：data：[12,30,45,66]
可以是一个多字段对象，只能用name和value
比如：data:[ {name:"js",value:90}, {name:"html",value:85}, {name:"jq",value:90}, {name:"vue",value:50}, ]
- radius、center、roseType的设置与使用 饼状图
radius : [“10%”,“70%”] 如果是百分比一定要加双引号。
radius : [50,100] 如果是像素值，可以不用加双引号。
radius : [“10%”,“70%”] 表示内圆半径为10%；外圆半径为70%。
center: [“50%”,“50%”] 表示图形的位置水平垂直居中。
roseType: “radius” （半径模式） 或者 roseType: “area”（面积模式)
stack:"任意字符串" 表示多组不同数据时 相同数据会重叠
2.Echarts在vue中的应用
安装echarts
npm install echarts
引入echarts
import * as echarts from 'echarts';
Echarts的容器：
<!-- 为 ECharts 准备一个具备高宽的 DOM 容器-->
<div id="char1" style="width: 50%;height:300px;display: flex;border: 1px solid #ccc">
</div>
基本格式：
// 实例化echarts
// 创建一个echarts实例 echarts会把生成的图标加载到该容器中
let char5 = echarts.init(document.getElementById("容器id"))
// 定义配置项
let option = {
// 图表的标题
title:{
text:"图标的标题"
},
// 图表的提示
tooltip:{},
// 图例
legend:{data:["睡眠时长"]},
// x轴线 横轴的图表数据
xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
// y轴线
yAxis:{},
// 构成画面的元素
series: [{
barWidth:26,// 柱形宽度（折线图无）
name: '',// legend对应的名称
type: 'bar',// 图形类型
stack: 'TUE',// 若多个值一样，则堆叠到一起
data: [1,1,1,11],// 数值
smooth: true, // 线条平滑展示，折线图起作用
areaStyle: {},// 面积填充,折线图有效
emphasis: {// 高亮
label: {
show: true,
textStyle: {
color: '#333333',
fontWeight: 'bold'
}
}
}
}]
}
// 更新配置
char5.setOption(option);
3.案例
<script setup>
import * as echarts from "echarts";
import {onMounted, reactive} from "vue";
const info = reactive({
char1List:[
{
name: '张三',
type: 'bar',
stack: 'Total',
data: [150, 230, 224, 2182, 135, 2147, 260,100],
},
{
name: '李四',
stack: 'Total',
data: [1250, 2230, 224, 212, 135, 2147, 260,100],
type: 'bar'
}
],
char2List:[
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
})
onMounted(()=>{
let char1 = echarts.init(document.getElementById('char1'));
char1.setOption({
title: {
text: '测试多线条'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['周一', '周二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','6666']
},
yAxis: {
type: 'value'
},
series: info.char1List
});
//饼图
let char2 = echarts.init(document.getElementById('char2'));
char2.setOption({
title: {
text: '测试饼图'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: info.char2List,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
//char3
myChar3();
myChar4();
})
const myChar3 =()=>{
// 实例化echarts
// 创建一个实例
let char3 = echarts.init(document.getElementById("char3"))
// 定义配置项
let option = {
// 图表的标题
title:{
text:"我的第一个图表"
},
// 图表的提示
tooltip:{},
// 图例
legend:{data:["睡眠时长"]},
// x轴线
xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
// y轴线
yAxis:{},
// 设置数据
series:[
{
// 数据名称
name:"睡眠时长",
// 类型为柱状图
type:"bar",
// 数据data
data:[8,10,4,5,9,4,8]
}
]
}
char3.setOption(option);
}
const myChar4 =()=>{
//实例化echarts
// 创建一个实例
let char4 = echarts.init(document.getElementById("char4"))
// 定义配置项
let option = {
// 图表的标题
title:{
text:"生活作息表"
},
// 图表的提示
tooltip:{},
// 图例
legend:{
data:['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
// x轴线
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// y轴线
yAxis:{
type:"value"
},
// 构成画面的元素
series:[
{
// 数据名称
name:"睡眠时长",
// 类型为柱状图
type:"bar",
// 数据data
data:[8,10,4,5,9,4,8]
},
{
// 数据名称
name:"玩游戏时长",
// 类型为柱状图
type:"line",
// 数据data
data:[2,4,1,5,6,8,5]
},
{
// 数据名称
name:"上课时长",
// 类型为柱状图
type:"line",
smooth:true,
// 数据data
data:[6,7,5,8,6,1,0],
areaStyle:"#f70"
},
{
name:"成绩",
// 饼形图
type:"pie",
// radius:80,
// 半径
radius:[80,50],
// 位移
left:-80,
top:-270,
// 数据
data:[
{name:"js",value:90},
{name:"html",value:85},
{name:"jq",value:90},
{name:"vue",value:50},
]
}
]
}
char4.setOption(option);
}
</script>
<template>
<div style="width: calc(100vw - 221);display: flex">
<div id="char1" style="width: 50%;height:300px;display: flex;border: 1px solid #ccc">
</div>
<div id="char2" style="width: 50%;height:300px;border: 1px solid #ccc">
</div>
</div>
<div style="width: calc(100vw - 221);display: flex">
<div id="char3" style="width: 50%;height:300px;display: flex;border: 1px solid #ccc">
</div>
<div id="char4" style="width: 50%;height:300px;border: 1px solid #ccc">
</div>
</div>
</template>
<style scoped>
</style>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）