基础使用
Echarts安装与使用
1、打开终端,在vue目录底下进行安装。
npm install echarts --save
2、打开package.json文件查看echarts已安装:
3、安装成功后在需要使用的页面引入echarts:
import * as echarts from 'echarts';
理解数据结构
前端:[]表示一个数组(对应多条数据),{}表示一个对象(对应一条数据)对应的后端:List(对应多条数据),某个对象或者是Map<key,value>
该数据结构从后端返回的数据应该是List<Xxx>或者 List<Map<key, vaule>
4、前端主要用Echarts提供的代码修改相关的数据结构即可,例如折线图前端实现
<div class="card" style="height: 400px; margin-top: 10px" id="line"></div>
import { reactive, onMounted } from "vue";
import * as echarts from "echarts";
const data = reactive({
baseData: {}
});
const loadBaseData = () => {
request.get('/statistics/data').then(res => {
if (res.code === '200') {
data.baseData = res.data;
} else {
ElMessage.error(res.msg);
}
});
};
const loadLine = () => {
request.get('/statistics/line').then(res => {
if (res.code === '200') {
const chartDom = document.getElementById('line'); //比如找到画板
const myChart = echarts.init(chartDom); //初始化画师
lineOptions.xAxis.data = res.data.xAxis; // 填入真实日期
lineOptions.series[0].data = res.data.yAxis; // 填入真实数据
myChart.setOption(lineOptions); // 重新渲染
} else {
ElMessage.error(res.msg);
}
});
};
loadBaseData();
onMounted(() => {
loadLine();
});
// 平滑折线图
const lineOptions = {
title: {
text: '最近一周非遗知识测试数量统计',
left: 'left'
},
legend: {
data: [],
template: ""
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'item'
},
xAxis: {
name: '日期',
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
name: '次数',
type: 'value'
},
series: [
{
name: '知识测试次数',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
markLine: {
data: [{ type: 'average', name: '知识测试次数平均值' }]
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
},
]
};
获取最近的日期列表
// 辅助方法:生成最近n天的日期列表
private List<String> getDateList(int days) {
Date today = new Date();
List<String> dateList = new ArrayList<>();
for (int i = 0; i < days; i++) {
Date date = DateUtil.offsetDay(today, -i);
dateList.add(DateUtil.formatDate(date));
}
Collections.reverse(dateList); // 确保日期按升序排列
return dateList;
}
柱状图
通用配置
toolbox: {
feature: {
saveAsImage: {}, //导出图片
dataView: {}, //数据视图
restore: {}, //还原重置
dataZoom: {}, //区域缩放
magicType: {
type: ['bar','line'] //动态图表类型转换
},
}
},
直角坐标系中的常用配置
饼图
地图
地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
基础使用
矢量地图数据:DataV.GeoAtlas地理小工具系列
颜色区分程度
可以根据数据在地图显示不同颜色表示程度,用visualMap设置,越接近max颜色越深。
具体代码例如下
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json',function(ret){
//ret 就是中国的各个省份的矢量地图数据
console.log(ret)
echarts.registerMap('chinaMap',ret)var option ={
geo:{
type:'map',
map:'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
roam:true,//设置允许缩放以及拖动的效果label:{
show:true // 展示标签
series: [
{
data: airData,
geoIndex:0,//数据和第8个geo配置关联在一起
type: 'map'
}
]
visualMap:{
min: 0,max: 300
inRange:{
color:['white','red']//控制颜色渐变的范围
},
calculable:true //出现滑块
}
}
mCharts.setOption(option)
}
地图和散点图结合
雷达图
雷达图可以用来分析多个维度的数据与标准数据的对比情况
仪表盘
仪表盘可以更直观的表现出某个指标的进度或实际情况
基础使用总结
高级使用
主题的使用
ECharts 提供主题包括:
- 默认主题:这是 ECharts 的默认主题,简洁大方。
- 暗黑主题:适用于夜间或低光环境,降低视觉疲劳。
- 亮色主题:适合白天或高光环境,提高视觉效果。
使用时在 ECharts 初始化时传入 theme
参数即可。以下是一个设置暗黑主题的示例:
var myChart = echarts.init(document.getElementById('main'), 'dark');
自定义主题步骤:
在Echarts官网→下载→主题下载→自定义主题
下载js格式然后引用后即可使用
调色盘和颜色渐变
全局调色盘会覆盖主题调色盘
局部覆盖全局的
即调色盘遵循就近原则
线性渐变实例:
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 宣纸渐变
{ offset: 0, color: "rgba(203,109,78,0.4)" }, // 浅朱砂
{ offset: 1, color: "rgba(248,224,200,0.1)" } // 米白
])
}
径向渐变效果图
直接样式与高亮样式
优先级高,会覆盖全局、局部等调色盘效果
直接样式实例
itemStyle: {
borderColor: '#F8E0C8', // 米白描边
borderWidth: 2
},
高亮样式实例
emphasis: { // 高亮状态
scaleSize: 8,
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.3)'
}
自适应
浏览器大小发生变化时,使图表也随之适配变化
window.onresize = function (){ //自适应大小
myChart.resize()
}
动画的使用
加载动画
增量动画
所有数据的更新都通过 setOption 实现, 我们不用考虑数据到底产生了那些变化, ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
Echarts中的增量动画就像盖房子,不是一下子把所有砖块都堆上去,而是先放一块,再放一块,一点一点地把房子盖起来。在Echarts里,数据也不是一下子全部展示出来,而是先显示一部分,然后慢慢添加剩下的部分,就像看电影的特效场景一样,一开始只能看到一点,然后逐渐完整地呈现出来。
动画的配置
缓动动画示例
交互API
Echarts事件
Documentation - Apache ECharts