echarts数据怎么赋值 vue_vue中怎么把echarts中data的数据循环

export default {

name: 'ranking',

data(){

return {

}

methods:{

// 工作质态--警情排名

queryRanking() {

let this_ = this;

this_.$post("这里面放接口", {}).then(res => {

if (res.code == 200) {

//遍历数组，取出数据

var rankName=[],commonCount=[]

for(var i=0;i

rankName.push(res.data[i].name);

commonCount.push(res.data[i].commonCount);

}

this_.getEchart(rankName,commonCount);

} else {

this_.getEchart([], [], [],[]);

this_.$message("无结果");

}

});

getEchart(rankName,commonCount){

var rankingChart= echarts.init(document.getElementById('rankEchart'));var option= {title : {

text: '警情排名',

left:'7%',

top:'-1%',

textStyle:{

//文字颜色

color:'#00eeff',

//字体大小

fontSize:19,

fontWeight:'normal',

}

color: ['#3398DB'],

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器，坐标轴触发有效

type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

grid: {

top: '12%',

left: '10%',

right: '15%',

bottom: '0',

containLabel: true

yAxis: [{

type: 'category',

data: rankName ,

axisLine: {

show: false,

lineStyle: {

color: '#00eeff'

}

axisTick: {

show: false

axisLabel: {

color:'#ccc',

fontSize:15

}],

xAxis: [{

show: false,

type: 'value'

}],

series: [{

name: '总计',

type: 'bar',

barWidth: '18%',

// barCategoryGap:10,

data: commonCount,

itemStyle: {

normal: {

color: '#00eeff' ,

label: {

show: true, //开启显示

position: ['220px','-1px'], //在上方显示

textStyle: { //数值样式

color: '#00eeff',

fontSize: 15

}

}]

};

// 为echarts对象加载数据

rankingChart.setOption(option);

}

mounted() {

// this.getEchart();

this.queryRanking();

}

echarts数据怎么赋值 vue_vue中怎么把echarts中data的数据循环相关推荐

python实现决策树数据直接赋值导入_决策树在python中的数据实现
我为python决策树算法实现完成了以下代码:from csv import reader def load_csv(filename): file = open(filename, "rb ...
swift x输入流_Swift 中不同窗体的切换和传递数据 (segue 的用法)
废话不多说,直接进入正题首先在 storyboard 中新建一个 ViewController,再新建一个名为 NewViewController 的 cocoa touch class 文件,继承 ...
oshi-core 简介、中文文档、中英对照文档下载
oshi-core 文档下载链接(含jar包.源码.pom) 组件名称中文-文档-下载链接中英对照-文档-下载链接 oshi-core-3.4.2.jar oshi-core-3.4.2-API ...
echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
前言此系列共分为以下几篇 <vue中高德地图的使用> <vue中基于高德的多行政区域覆盖> <vue中高德搭配echarts做数据迁徙流线图> (本篇) 本篇效果 ...
不用POI技术，JAVA给Word文档中的数据区域赋值
在本地磁盘上打开一个Word文件,添加内容或插入图片是十分容易的,但是如何在线打开一个Word文件并修改Word文件内容或者插入图片呢,这时就需要通过PageOffice开发平台,给数据区域赋值,来实 ...
echarts中markline设置后，前端其他数据都显示了，就是不显示markline，请求赐教
Echarts菜鸟,刚刚开始学习,请问echarts中markline设置后,前端其他数据都显示了,就是不显示markline,就是不显示警戒线!!!!请求大神赐教 option5 = { toolt ...
关于TD标签中如何使用数据库中拿到的数据进行赋值判断
######关于 TD中如何使用数据库中拿到的数据进行赋值判断** 今天本人在写项目过程中碰见了一个问题, 数据库中有一个值的判断 1:开发 2:未开发 3:开发失败我需要从数据库中拿到值然后循 ...
echarts导入mysql数据库_Echarts最新:Django中从mysql数据库中获取数据传到echarts方式_爱安网 LoveAn.com...
关于"Echarts"的最新内容聚合阅读这篇文章主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随 ...
wpf在presenter（VM）中异步更新viewer中数据
在MVP或者MVVM模式中,VM和Presenter通过binding与Viewer交换数据.在实际项目中,往往需要动态刷新界面的数据.本人一般通过刷新与之绑定的属性变化完成.但是,如果遇到数据量较大 ...

echarts数据怎么赋值 vue_vue中怎么把echarts中data的数据循环

echarts数据怎么赋值 vue_vue中怎么把echarts中data的数据循环相关推荐

最新文章

热门文章

echarts数据怎么赋值 vue_vue中 怎么把echarts中data的数据循环

echarts数据怎么赋值 vue_vue中 怎么把echarts中data的数据循环相关推荐

最新文章

热门文章

echarts数据怎么赋值 vue_vue中怎么把echarts中data的数据循环

echarts数据怎么赋值 vue_vue中怎么把echarts中data的数据循环相关推荐