echarts做了一个气泡图

今天，用echarts做了一个气泡图，功能只是实现了，样式还需要自己修改，
我用的echarts的版本是v4.2.1

<template><div><div style="width:50%"><div class="perstatimg"><div id="myHorizontal" class="myHorizontalClass" :style="{ width: '643px', height: '300px' }"></div></div></div></div>
</template><script>
export default {data() {return {}},mounted(){this.drawLine()},methods: {// 画图drawLine() {// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById("myHorizontal"));// 绘制流程数量图表myChart.setOption({backgroundColor: this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{offset: 0,color: '#f7f8fa'},]),title: {text: '气泡图',x:'center',},legend: {show: false},grid: {left: '8%',top: '10%'},xAxis: {show: false},yAxis: {show: false},toolbox: {show: true,type: ["bar"]},series: [{name: '1990',data: [],type: 'scatter',symbolSize: function (data) {return data[2];},itemStyle: {color: 'rgba(46,107,230,0.10)',borderColor: ' #7FB1FF'},label: {show: true,position: 'inside',color: '#666666',fontSize: 12,formatter: function (param) {let data = param.data[3].length > 4 ? param.data[3].slice(0, 4) + '...' : param.data[3];var astr = '{a|' + param.data[4].toFixed(2) + '%' + '}' + '\n' + data;return astr;},rich: {a: {color: '#2E6BE6',align: 'center'}}}}]});var data =  [{ name: "dns", value: 66 },{ name: "htte", value: 155 },{ name: "sdf", value: 911 },{ name: "sd", value: 8 },{ name: "s", value: 6221 },{ name: "asd", value: 206 },{ name: "qwe", value: 209 },{ name: "qwewq", value: 132776 },{ name: "999", value: 12 },{ name: "fdgd", value: 550 },{ name: "dns", value: 66 },{ name: "htte", value: 155 },{ name: "sdf", value: 911 },{ name: "sd", value: 8 },{ name: "s", value: 6221 },{ name: "asd", value: 206 },{ name: "qwe", value: 209 },{ name: "qwewq", value: 132776 },{ name: "999", value: 12 },{ name: "fdgd", value: 550 },// { name: "11", value: 99 },// { name: "12", value: 123 },// { name: "13", value: 11 },// { name: "14", value: 55 },// { name: "15", value: 77 },// { name: "999", value: 234 },// { name: "101", value: 78 },// { name: "11", value: 99 },// { name: "12", value: 123 },// { name: "13", value: 11 },// { name: "14", value: 55 },// { name: "15", value: 77 },];var newdata = [];let len = data.length;if (len) {let total = 0;data.forEach(element => {total += element.value;});let indexArr = this.generateNRandomCoords(len, len);data.forEach((element, index) => {// 重构数组x轴、y轴、球的大小、name、valuenewdata.push([index * 3, indexArr[index], this.getTotalValue(element.value / total * 100), element.name, element.value / total * 100]);});}myChart.setOption(this.option = {series: [{data: newdata,},],});},// 随机生成球的y轴坐标，x轴在下方有体现，取了index * 3generateNRandomCoords(height, n) {let coords = [];function next() {let y = Math.random() * height;if (coords.find((y1) => {y1 === y;})) {return next();}return y;}for (let i = 0; i < n; i++) {coords[i] = next();}return coords;},/*** 避免数值非常大的时候，球会非常大，这里做个限制，超过某个值后，球的大小就固定为40* data: 返回的某一个球的value值* retura值是球的大小*/getTotalValue(data) {if (data < 0.1) {return 5;} else if (0.1 <= data && data < 1) {return 10;} else if (1 <= data && data < 10) {return 20;} else if (10 <= data && data < 50) {return 30;} else {return 40;}}}
};
</script>
<style>
.perstatimg{margin-top:20px;height: 500px;overflow: hidden;
}
</style>

参考链接：Echarts实现气泡图

echarts做了一个气泡图相关推荐

初学HTML5，用eCharts做了一个空气质量检测仪
一直想自己动手做一个室内空气质量检测仪,主要关心颗粒物浓度.二氧化碳浓度和温湿度指标. 设计方案网上也找到了一些爱好者作品的演示,发现大多是基于单片机+传感器+显示器的方案.比如下面这个x宝找到的: ...
使用eCharts做了一个中国地图的各地之间的线路连接
1.具体代码路径 https://gallery.echartsjs.com/editor.html?c=x8DKVD1v2&v=4 2.js文件 https://download.csdn. ...
echarts 设置仪表盘数字的位置_一个 ECharts 做的猜数小游戏
大概 1 年多之前,一位老同学找到我,问能不能帮他做一个非常简单的猜数字游戏,需求是这样的: 在 1 到 100 的整数里,随机选一个数字,让小朋友们猜: 如果猜错了,告知小朋友猜大了还是猜小了: 如 ...
android做一个坦克大战小游戏_一个 ECharts 做的猜数小游戏
大概 1 年多之前,一位老同学找到我,问能不能帮他做一个非常简单的猜数字游戏,需求是这样的: 在 1 到 100 的整数里,随机选一个数字,让小朋友们猜: 如果猜错了,告知小朋友猜大了还是猜小了: 如 ...
vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图效果如图首先 1.安装echarts npm install echarts -S 2.使用全局使用在main.js中 // 引入echarts imp ...
四步学会使用ECharts做图
前言:最近有些朋友抱怨用ECharts做统计图时难做,看官网很枯噪无味头又晕,那接下来我简单说下我是怎么四步做图的. 首先先引入安装ECarts依赖,使用webpack工具打包的可以使用命令行安装 n ...
jsp用Echarts做扇形图
jsp用Echarts做柱状图(静态) 注:本文主要讲述静态数据如果想要动态获取数据可以使用ajax获取数据赋值给data中value即可第一步:去echarts官方下载最新的js; 官方地址 : ...
jsp用Echarts做柱状图
jsp用Echarts做扇形图(静态) 注:本文主要讲述静态数据如果想要动态获取数据可以使用ajax获取数据赋值给data中value即可第一步:去echarts官方下载最新的js; 官方地址 : ...
使用echarts做词云图
使用echarts做词云图,可以将词云图插入到HTML页面中,不像pyecharts只能生成一个独立的HTML页面,更不像wordcloud生成一张图片. 使用echarts可以实现词云(文字云) 网 ...

echarts做了一个气泡图

echarts做了一个气泡图相关推荐

最新文章

热门文章