Echarts⽓泡图纵横轴为中⽂，交叉展⽰实现⽅式以及⽓泡展⽰数量效果图如下
如⽰例图所展⽰的效果是每个⽂件类型所对应的热词被搜索了多少次；
实现⽅式
1. 需要⽤到echarts⽓泡图的配置
<div ref="chart" class="charts-box" />
var option={
legend:{
// right: '10%',
// top: '3%',
data:[]
},
grid:{
left:'8%',
top:'10%'
},
xAxis:{
type:'category',
splitLine:{
interval:0,
lineStyle:{
type:'dashed'
}
},
interval:0,
axisTick:{
show:fal
},
axisLine:{
lineStyle:{
color:'#DCDFE6',
//这⾥是为了突出显⽰加上的
//横轴信息全部显⽰
}
},
axisLabel:{
fontWeight:400,
color:'#303133',
showMinLabel:true,
showMaxLabel:true,
align:'center',
interval:0,//使x轴⽂字显⽰全
},
// scale: fal,
data:[]
},
// visualMap: {
// show: fal,
// inRange: {
// symbolSize: [20, 50]
// }
// },
yAxis:{
type:'category',
axisTick:{
show:fal
},
interval:0,
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
},
axisLine:{
lineStyle:{
color:'#DCDFE6',
/
/这⾥是为了突出显⽰加上的
//横轴信息全部显⽰
}
},
axisLabel:{
fontWeight:400,
与名人对话作文fontFamily:'Microsoft YaHei',
fontSize:18,
color:'#303133',
showMinLabel:true,
showMaxLabel:true,深夜食堂黄磊版
/
/ align: 'left',
interval:0,//使x轴⽂字显⽰全
},
data:[],
scale:fal
},
ries:{
type:'scatter',
// data: []
}
}
mounted(){
this.initChart();
window.addEventListener("resize",sizeChart); },
methods:{
resizeChart(){
if(this.chart){
size();
}
this.chart =this.$echarts.init(this.$refs.chart);
this.chart.tOption(this.option);
},
getSeariesData(val){
//先说下val的数据格式[{groupName:"",name:"",value:""},{groupName:"",name:"",value:""}]需要遍历data赋值的是索引。
//val也可以是这种数据格式;val=[
// [0, '江西', 2], // 意思是此点位于 xAxis: '星期⼀', yAxis: '江西'，最后⼀位索引代表值。
// [3, '湖南', 1], // 意思是此点位于 xAxis: '星期四', yAxis: '湖南'。
// [2, '河北', 2], // 意思是此点位于 xAxis: '星期三', yAxis: '河北'。
// [3, '⽢肃', 5]
]
//进⾏遍历此时data赋值其中⼀位索引值，这种配置不了图例
this.option.ries = val.map((d, i)=>{
return{
type:'scatter',
name: d.name,//⽤来配置图例的也可以不要，需要跟lenged的data配置的名称⼀样
label:{
show:true,
color:'#fff',
formatter:function(params){
return val[params.riesIndex].value;//⽓泡值
}
},
symbolSize: d.value *2,
调研文章data:[[
this.option.xAxis.data.upName),//x轴data的索引，因为数据格式是这种的，所以x轴都是去重，y轴也是
this.option.yAxis.data.indexOf(d.name)//y轴data的索引
]],
itemStyle:{
lors[data[i]]//给每⼀种⽓泡设置的颜⾊值
重启桌面}
// data: [
// [
// xData.h),
// yData.indexOf(d.business)
// ]
// ]
}
})
},
}
没有2了就这样吧，给ries赋值，xy轴赋值就ok了
赋上完整的代码
<template>
<div class="container">
<div class="file-type">
<span class="file-type-title">⽂件类型</span>
<ul class="file-type-classify">
<li :class="checkedAllFileType ? 'label-all active ' : 'label-all'" @click="checkedAllFile()">全部</li>
<li v-for="(item) in currentfileType" :key="item.key" :label="upName" @click="checkedFile(item)" :class="item.checked ? 'label-all active ' : 'lab el-all'">{{upName}}({{item.value}})</li>
</ul>
</div>
<div v-if="flag" ref="chart" class="charts-box" />
<div v-el class="noData">
<img src="../../../asts/no-data.png" alt="">
</div>
</div>
</template>
// xAxis yAxis
// [0, '江西', 2], // 意思是此点位于 xAxis: '星期⼀', yAxis: '江西'，最后⼀位索引代表值。
// [3, '湖南', 1], // 意思是此点位于 xAxis: '星期四', yAxis: '湖南'。
// [2, '河北', 2], // 意思是此点位于 xAxis: '星期三', yAxis: '河北'。
// [3, '⽢肃', 5]
]
// var xData = ['星期⼀', '星期⼆'，‘星期三’，‘星期四’];
// var yData = ['江西', '湖南', '河北', '⽢肃']
// var data = [1,2,3,4,5,6,7,8,9,10]
import { getHotWordsList } from "@/api/fileRetrieval/fileRetrieval"
export default {
name: "fileTrendBox",
data() {
return {
chart: null,
flag:true,
currentfileType: [
],党的建设
option: {
//⽓泡图的⾊值
color:['#FF9514', '#3F9BF6', '#33A07B','#A776E4','#FFD491','#B3D8FF','#F78989','#FBC4C4','#A6D8CA','#FFD800','#8BA6FF','#DC4640'], legend: {
// right: '10%',
// top: '3%',
//⽓泡图图例为检索热词
data: []
},
grid: {
left: '8%',
top: '10%',
height:'75%',
},
xAxis: {
type: 'category',
splitLine: {故事读后感
interval: 0,
lineStyle: {
type: 'dashed'
}
},
interval: 0,
axisTick: {
show: fal
},
axisLine: {
lineStyle: {
color: '#DCDFE6',
//这⾥是为了突出显⽰加上的
//横轴信息全部显⽰
}
},
axisLabel: {
fontWeight: 400,
fontFamily: 'Microsoft YaHei',
fontSize: 18,
color: '#303133',
margin: 20,
showMinLabel: true,
showMaxLabel: true,
align: 'left',
interval: 0,//使x轴⽂字显⽰全
rotate:-30,
},
},
yAxis: {
type: 'category',
axisTick: {
show: fal
},
interval: 0,
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
妙趣横生的意思是什么
axisLine: {
lineStyle: {
color: '#DCDFE6',
//这⾥是为了突出显⽰加上的
//横轴信息全部显⽰
}
},
axisLabel: {
fontWeight: 400,
fontFamily: 'Microsoft YaHei',
fontSize: 18,
color: '#303133',
showMinLabel: true,
showMaxLabel: true,
// align: 'left',
interval: 0,//使x轴⽂字显⽰全
margin:20,
//Y轴⽂字过长时换⾏展⽰
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 6; //⼀⾏显⽰⼏个字
var rowNumber = il(paramsNameNumber / provideNumber); if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
如何申请出国留学var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} el {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} el {
newParamsName = params;
}
return newParamsName
},
},
data: [],
scale: fal
},
ries: {
type: 'scatter',
// data: []
}
// SDATA.map((d, i) => {
