Echarts之气泡图图例

需求：

鼠标移入：

1、容器

<div id="syscBubleChart" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)" ></div>

2、data中的数据

export default {data() {return {plantCap: [{name: "2018",value: "46.96",num: "55236",tip: "一年以上",color: "#FF923F",},{name: "2019",value: "17.25",num: "20293",tip: "半年到一年",color: "#00EA9C",},{name: "2020",value: "35.79",num: "42100",tip: "半年以下",color: "#4F9EFD",},],}}}

3、在methods中

methods:{initChart(){let colors = ["rgb(148, 91, 51)", "rgb(0, 147, 103)", "rgb(52, 99, 162)"];// 计算数据总和  reducelet result = this.plantCap.reduce((sum, e) => Number(sum) + Number(e.value),0);var datalist = [{offset: [10, 80],symbolSize: 80,opacity: 0.5,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgb(46, 42, 50, .5)",},{offset: 1,color: "rgb(148, 91, 51,.5)",},]),},{offset: [38, 70],symbolSize: 84,opacity: 0.5,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgb(10, 55, 61, .5)",},{offset: 1,color: "rgb(0, 147, 103, .5)",},]),},{offset: [66, 80],symbolSize: 90,opacity: 0.5,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgb(8, 44, 84, .5)",},{offset: 1,color: "rgb(52, 99, 162, .5)",},]),},];var datas = [];for (var i = 0; i < this.plantCap.length; i++) {var item = this.plantCap[i];var itemToStyle = datalist[i];datas.push({// name: item.name + "\n" + item.value,name:((item.value / result) * 100).toFixed(2) +"%" +"\n" +"\n" +"\n" +"\n" +item.num +"人", //气泡的百分比,value: itemToStyle.offset,symbolSize: itemToStyle.symbolSize,label: {normal: {textStyle: {fontSize: 20,lineHeight: 17,color: item.color,padding: [68, 0, 0, 0],},},},itemStyle: {normal: {color: itemToStyle.color,opacity: itemToStyle.opacity,borderWidth: "2",borderColor: item.color,borderType: "solid",},},});}let option = {// backgroundColor: "#20203e",color: colors,grid: {show: false,top: 10,bottom: 10,containLabel: true,},tooltip: {trigger: "item",// backgroundColor: "rgba(0,0,0,0.9)",formatter: function (params) {let titleName;if (params.dataIndex == 2) {titleName = "半年以下";} else if (params.dataIndex == 1) {titleName = "半年到一年";} else if (params.dataIndex == 0) {titleName = "一年以上";}return ('<span style="font-size: 0.2rem;font-weight: bold;font-family: SourceHanSansCN;">' +titleName +"</span>" +// params.seriesName +"<br/>" +params.marker +'<span style="color:' +params.color +';font-size: 0.2rem;font-weight: bold;font-family: SourceHanSansCN;">' +params.data["name"] +"\n" +"</span>");},},legend: {show: true,left: 85,bottom: 50,trigger: "axis",// 图例文字颜色textStyle: {fontSize: "20",fontWeight: "bold",fontFamily: "SourceHanSansCN",color: "#A0B2D3",},icon: "rect",itemWidth: 10,itemHeight: 10,},xAxis: [{gridIndex: 0,type: "value",show: false,min: 0,max: 100,nameLocation: "middle",nameGap: 5,},],yAxis: [{gridIndex: 0,min: 0,show: false,max: 100,nameLocation: "middle",nameGap: 30,},],series: [{name: "一年以上",// color:'red',type: "scatter",symbol: "circle",symbolSize: 120,label: {normal: {show: true,formatter: "{b}",color: "#fff",textStyle: {fontSize: "20",fontFamily: "BoldCondensed",},},},dataLabels: {allowOverlap: true,},data: datas,},{name: "半年到一年",// color:'red',type: "scatter",symbol: "circle",symbolSize: 120,label: {normal: {show: true,formatter: "{b}",color: "#fff",textStyle: {fontSize: "20",fontFamily: "BoldCondensed",},},},data: datas,},{name: "半年以下",type: "scatter",symbol: "circle",symbolSize: 120,label: {normal: {show: true,formatter: "{b}",color: "#fff",textStyle: {fontSize: "20",fontFamily: "BoldCondensed",},},},data: datas,},],};let myChart = this.$echarts.init(document.getElementById("syscBubleChart"));myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}
}

4、在mounted中调用

mounted() {this.initChart();},

以上

Echarts之气泡图图例相关推荐

Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
echarts图表自定义图例
在echarts中自定义图例样式就跟表格一样清晰的展示数据  <div id="myChart1" ref="myChart ...
echarts 多组图例重叠问题
问题当图表中使用多组图例且文字较多时,容易出现图例重叠的问题,例如: 解决方法在legend属性中增加itemGap属性,调整数值就可以解决问题,不给过在屏幕宽度变化时还是会出现重叠的问题. 官方 ...
echarts 如何实现图例单个数据项加上背景颜色和饼图中的背景图自适应
需求: ECharts中,可以通过设置legend中的formatter属性来自定义图例项的显示格式.以下是一个示例: option = {// ...legend: {data: ['A', 'B' ...
echarts自定义气泡图
拿到的需求是实现自定义x.y.size.color的气泡图,color按值以色阶排布(提需求的是我女朋友,咱也不敢问,还得加班干你说气人不~),分析完需求后我决定学习下echarts的实现,代码如下: ...
echarts实现气泡图（气泡之间不叠加）
前言:echarts本身是有气泡图的,官方气泡图的特点是每个气泡的位置是基于坐标轴进行定位,如图1和2所示.但是本文所介绍的气泡图并不是官方所介绍的气泡图,而是一类区别于官方的图表类型,这种图表类型通 ...
echarts取消选中图例,echarts图例判断点击超过4个，提示并取消选中
此功能重要知识点就是dispatchAction,可参考文档Documentation - Apache ECharts 以下是代码接如下 https://echarts.apache.org/zh/ ...
echarts 默认显示图例_echarts图例组件点击显示功能(默认功能点击消失)
var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '折线图堆叠' } ...
echarts设置图标图例legend为圆，长方形，扇形等
echart 设置图例图标形状legend: {data: ["总数", "已解决", "未解决"],icon: "circle& ...

Echarts之气泡图图例

Echarts之气泡图图例相关推荐

最新文章

热门文章