echarts画热力图
echarts 力图
2023-09-11 14:19:39 时间
。
安装echarts
npm install echarts -S
封装全局组件:
@/utils/myCharts.js
import * as echarts from 'echarts'; // 图表统一放在此处 const install = function (Vue) { Object.defineProperties(Vue.prototype, { $chart: { get() { return { // 热力图 hotPicture: function (id, data) { console.log(data,"data") let realData = data.data.map(item => { return [item[0],item[1],item[2].sum || "-"] }) console.log(realData,"realData"); this.chart = echarts.init(document.getElementById(id)); this.chart.clear(); const optionData = { title: { text: '热力图', left: 'center', textStyle: { fontWeight: 'normal', }, }, dataZoom: [ { show: true, realtime: true, start: 0, marginTop: 10, end: 100, // bottom: -10 }, ], tooltip: {//提示 position: 'bottom', formatter:(params) => { var arr = data.data.filter(item => { return item[0] == params.value[0]; }); var sourseItem = arr.find(item => { return params.value[1] == item[1]; }) console.log(sourseItem,"sourseItem"); var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;font-size:12px;">'; for (var i = 0; i < sourseItem[2].behavior.length; i++) { var option = sourseItem[2].behavior[i]; console.log(option,"option"); htmlStr += '<div style="color: #666;">' + '<span style="font-weight:600;">' + option.name + '</span>' + ':' + '<span>' + option.num + '</span>' + '</div>'; } htmlStr += '</div>' return htmlStr; } }, grid: { height: '50%', top: '10%' }, xAxis: { type: 'category', data: data.times, splitArea: { show: true } }, yAxis: { type: 'category', data: data.names, splitArea: { show: true } }, visualMap: { min: 0, max: 10,//多少次达到颜色最重 calculable: true, orient: 'horizontal', left: 'center', bottom: '15%', type: 'continuous',//默认 还有piecewise // pieces: [{//piecewise配置对应的颜色区间 // gt: 0, // lte: 10, // color: '#008143' // }, { // gt: 10, // lte: 20, // color: '#8D0020' // },] }, series: [{ name: '提示标题', type: 'heatmap',//热力图类型 data: realData,//数据 label: { show: true }, emphasis: { itemStyle: { shadowBlur: 10,//阴影的模糊度 shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标晃过某一项时的阴影样式 } } }] }; this.chart.setOption(optionData); setTimeout(() =>{ window.onresize = ()=>{ this.chart.resize(); } },200) }, }//return } } }) } export default { install }
main.js引入
import myCharts from "@/utils/myCharts.js"; Vue.use(myCharts);//封装的echarts组件
调用:
<template> <div> <div id="hotPicture" style="width: 100%;height:500px;"></div> </div> </template> <script> export default { data(){ return { data:{ times:['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10', ],//X轴数据-日期 names:['姓名1', '姓名2', '姓名3','姓名4', '姓名5', '姓名6', '姓名7'],//y轴数据-姓名 data:[ [0,1,{sum:5,behavior:[{name:"搜索",num:1},{name:"回复",num:4}]}],// 3/1,姓名2,5次 [1,2,{sum:9,behavior:[{name:"搜索",num:1},{name:"回复",num:8}]}],// 3/2,姓名3,,9次 [9,6,{sum:2,behavior:[{name:"搜索",num:1},{name:"回复",num:1}]}],// 3/10,姓名7,2次 [8,5,{sum:20,behavior:[{name:"搜索",num:10},{name:"回复",num:10}]}],// 3/9,姓名6,20次 ], } } }, mounted(){ this.$chart.hotPicture("hotPicture",this.data) } } </script>
效果:
新配置:
//热力图 hotPicture: function (id, data) { console.log(data,"data") let realData = data.data.map(item => { return [item[0],item[1],item[2].sum || "-"] }); this.chart = echarts.init(document.getElementById(id)); this.chart.clear(); const optionData = { // title: { // text: '热力图', // left: 'center', // textStyle: { // fontWeight: 'normal', // }, // }, dataZoom: [ { show: true, realtime: true, start: 0, marginTop: 10, end: 100, height:0,//缩放区域高度 moveHandleSize:20,//滑块宽度 handleSize:40,//缩放手柄宽度 }, { type: 'slider', yAxisIndex: 0, filterMode: 'none', zoomLock:false,//显示值不能扩大,是固定值(20) startValue: 0, // 从头开始。 endValue:19, // 一次性展示20个 right:40, top:60, width:0,//缩放区域宽度 moveHandleSize:20,//滑块宽度 handleSize:40,//缩放手柄宽度 }, ], tooltip: {//提示 position: 'bottom', backgroundColor: 'rgba(0,0,0,.5)', formatter:(params) => { var arr = data.data.filter(item => { return item[0] == params.value[0]; }); var sourseItem = arr.find(item => { return params.value[1] == item[1]; }) // console.log(sourseItem,"sourseItem"); var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;font-size:12px;">'; htmlStr += '<div style="color: #fff;">' + '<span style="font-weight:600;">' + vue.$t('operationFrequency') + '</span>' + ':' + '<span>' + sourseItem[2].sum + '</span>' + '</div>'; for (var i = 0; i < sourseItem[2].behavior.length; i++) { var option = sourseItem[2].behavior[i]; htmlStr += '<div style="color: #fff;">' + '<span style="font-weight:600;">' + vue.$t(option.name) + '</span>' + ':' + '<span>' + option.num + '</span>' + '</div>'; } htmlStr += '</div>' return htmlStr; } }, grid: { height: '470', top: '60', bottom:'70', right:'60' }, xAxis: { type: 'category', data: data.times, splitArea: { show: true } }, yAxis: { type: 'category', data: data.names.map(item => {return item.replace(/\?\d+$/,"")}), splitArea: { show: true } }, visualMap: { min: 0, max: 10,//多少次达到颜色最重 calculable: true, orient: 'horizontal', right: '60', top: 'top', type: 'continuous',//默认 还有piecewise // pieces: [{//piecewise配置对应的颜色区间 // gt: 0, // lte: 10, // color: '#008143' // }, { // gt: 10, // lte: 20, // color: '#8D0020' // },] inRange: { color: ['#EBF1FF', '#C2D4FF', '#99B4FF','#7092FF','#486EFF','#324ED9'], // symbolSize: [30, 100] }, }, series: [{ name: '提示标题', type: 'heatmap',//热力图类型 data: realData,//数据 label: { show: true, }, emphasis: { itemStyle: { shadowBlur: 10,//阴影的模糊度 shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标晃过某一项时的阴影样式 } } }] }; this.chart.setOption(optionData); // this.chart.resize({height:(data.names.length * 20) + 316}); this.chart.resize(); setTimeout(() =>{ window.onresize = ()=>{ // this.chart.resize({height:(data.names.length * 20) + 316}); this.chart.resize(); } },200) },
。
相关文章
- echarts折线图实现切断效果
- 解决echarts的X轴渲染不完整
- vue可视化图表 基于Echarts封装好的v-charts简介
- echarts+node+ajax实现时间天气服务器
- 浅析ECharts使用Canvas或SVG渲染区别及如何选用、使用记录:图表背景透明、x轴y轴刻度线及文本、折线点效果、如何设置折线下面区域渐变色、坐标轴线刻度隐藏及文字设置、配置hover时突出显示图例隐藏其他图例
- React魔法堂:echarts-for-react源码略读
- echarts Y轴刻度保留几位小数
- echarts 更换主题颜色
- 几个不错的echarts +百度地图 案例
- echarts X轴显示不全 有省略
- jquery.js和jquery.min.js的区别和springboot整合echarts.min.js