百度echarts 的label:formatter 如何自己手动触发?

百度echarts 的label:formatter 如何自己手动触发?
想自己写一个js方法去控制触发回调函数

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

el-table 插槽里input 框 做了 限制 其他列 用了 :formatter 失效?

![图片说明](https://img-ask.csdn.net/upload/202005/22/1590110331_257353.png) 上面是:formatter方法![图片说明](https://img-ask.csdn.net/upload/202005/22/1590110361_537341.png) 这是给插槽input 框 做的限制 ![图片说明](https://img-ask.csdn.net/upload/202005/22/1590110437_826488.png) 这是:formatter 做的计算 靠输入框 和其他列 得到的值![图片说明](https://img-ask.csdn.net/upload/202005/22/1590110480_301985.png) 但是 输入中文不让之后 在输数字 进货盈亏 :formatter 失效 求指导=====================================================================![图片说明](https://img-ask.csdn.net/upload/202005/22/1590124955_17044.png) input-number 值是12 旁边是同一个属性 根本得不到值 也 相应 根本做不了计算

新手Echarts问题:为什么官网有些案例无法直接调用?

因为工作需要,公司最近需要我们去调用一下echarts。 因为以前没有用过echarts,只好先去学习一下。 今天在测试echarts时却发现了一个问题: 官网发的大部分案例都可以直接复制执行,还有一些是需要json文件的暂且不论。 今天测试的这个,我看过代码没有调用json文件的记录,却还是显示一片空白。 echarts环境:echarts用的是官网的2.08M的源码包,浏览器是 firfox. ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script src="echarts.js"></script> </head> <body> <div id="charts" style="position: absolute;width: 80%;height: 80%;"> </div> </body> <script> var charts=echarts.init(document.getElementById('charts')); //为了代码可读性,我把系统给的数据全部以 data 代替 var data0 = [ data ]; var data = [ data ]; // See https://github.com/ecomfe/echarts-stat var myRegression = ecStat.regression('logarithmic', data); myRegression.points.sort(function(a, b) { return a[0] - b[0]; }); option = { legend: { data: ['1990', '2015'], bottom: 20 }, title: { text: '1990 and 2015 per capita life expectancy and GDP', subtext: 'By ecStat.regression', sublink: 'https://github.com/ecomfe/echarts-stat', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, grid: { top: 80, bottom: 90 }, xAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } }, }, series: [{ name: '1990', type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(120, 36, 50, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(251, 118, 123)' }, { offset: 1, color: 'rgb(204, 46, 72)' }]) } }, data: data0 }, { name: '2015', type: 'scatter', symbolSize: function(data) { return Math.sqrt(data[2]) / 5e2; }, label: { emphasis: { show: true, formatter: function(param) { return param.data[3]; }, position: 'top' } }, itemStyle: { normal: { shadowBlur: 10, shadowColor: 'rgba(25, 100, 150, 0.5)', shadowOffsetY: 5, color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ offset: 0, color: 'rgb(129, 227, 238)' }, { offset: 1, color: 'rgb(25, 183, 207)' }]) } }, data: data1 }, { name: 'line', type: 'line', lineStyle: { normal: { color: '#2f4554' } }, smooth: true, showSymbol: false, data: myRegression.points, markPoint: { itemStyle: { normal: { color: 'transparent' } }, label: { normal: { show: true, position: 'left', formatter: myRegression.expression, textStyle: { color: '#333', fontSize: 14 } } }, data: [{ coord: myRegression.points[myRegression.points.length - 1] }] } }] }; charts.setOption(option); </script> </html> ``` 如果我数据的修改影响了判断,这里是源码--->[Echarts代码源码](https://echarts.baidu.com/examples/editor.html?c=scatter-logarithmic-regression "")

ECharts 3 如何触发图表的tooltip行为?

echart3的动态趋势图,定时5秒一刷新,如何让它在初始时显示第0条记录的信息,手动触发tooltip事件呢? 着急使用,各位大神帮帮忙。

Echarts Map 市级地图显示时 label 重合

[问题简述] 显示长春市地图时有几个区的 label 重合在一起了 ![图片说明](https://img-ask.csdn.net/upload/201709/21/1505983411_490974.png) [版本及环境] [ECharts 版本]: echarts-min.js 3.7.1 [浏览器类型和版本]: Chrome 59.0.3071.86(正式版本) (32 位) [操作系统]: Windows 10 [期望结果] label 换到一个不重合的位置显示 [ECharts配置项] ``` option = { title:{ text: ‘长春市地图’, left: 'center' }, tooltip:{ trigger: 'item', formatter: function (params, ticket, callback) { var tip=params.name; if(!isNaN(params.value)){ tip=tip+'<br/>'+params.value; } return tip; } }, toolbox: { feature: { restore: {} } }, visualMap: { min: 0, max: 35, text:['高','低'], realtime: false, calculable: true, color: ['orangered','yellow','lightskyblue'] }, series: [{ name: '', type: 'map', mapType: ‘changchunshi’, selectedMode : 'single', label: { normal: { show: true }, emphasis: { show: true } }, data: [{"name":"绿园区","id":"lvyuanqu","value":1},{"name":"汽开区","id":"qikaiqu","value":0},{"name":"长春新区","id":"changchunxinqu","value":6},{"name":"双阳区","id":"shuangyangqu","value":3},{"name":"二道区","id":"erdaoqu","value":0},{"name":"榆树市","id":"yushushi","value":0},{"name":"朝阳区","id":"chaoyangqu","value":2},{"name":"九台区","id":"jiutaiqu","value":0},{"name":"农安县","id":"nonganxian","value":10},{"name":"南关区","id":"nanguanqu","value":1},{"name":"净月区","id":"jingyuequ","value":0},{"name":"宽城区","id":"kuanchengqu","value":0},{"name":"德惠市","id":"dehuishi","value":0}] }] } ```

Echarts饼图x,y,x2,y2是什么含义?

> color: { type: 'linear', x: 0, y: 0, x2: .1, y2: 1, colorStops: [{ offset: 0, color: '#4dcdfc' // 0% 处的颜色,蓝绿色 }, { offset: 1, color: '#3F77FE' // 100% 处的颜色,蓝色 }], globalCoord: true // 缺省为 false }, 普通坐标是下图这种: ![图片说明](https://img-ask.csdn.net/upload/201908/19/1566209697_892664.png) 饼图的X坐标的0起点是哪里,往哪个方向是增大的?Y坐标起点是哪里?往哪个方向是增大的? 我尝试了一下,X好像是从左往右递增,Y是从往上下递增,取值范围不是0-1,而是可以更大,而且不能取负数。 另外globalCoord是什么意思? 完整代码如下: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>EChartsTest</title> <!-- 引入 echarts.js --> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;background-color:#081C28"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { series: [ { name: '', type: 'pie', radius: ['68%', '83%'], //半径 avoidLabelOverlap: true, //是否启用防止标签重叠策略 hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果 color: ["#ff726b", "#87da76"], //默认色板:粉红色,绿色 //设置值域标签 label: { normal: { fontSize: '14', position: 'center', //'outer'在饼图外,'inner'在饼图上,'center'在饼图中心 color: '#00FFFC', //浅蓝色 // formatter: '{b}\n\n{d}%' // {b}:数据名; {c}:数据值; {d}:百分比 formatter: function (data) { return '{name|' + data.name + '}\n\n{num|' + data.percent + '%}'; }, //富文本编辑,用于设置文本样式 rich: { name: { color: '#00FFFC', fontSize: '14', textShadowColor: 'rgba(0,255,252,1)', //浅蓝绿色 textShadowBlur: '4' //文字光影模糊度,其实就是阴影外延出来的长度 }, num: { color: '#06BEFF', //亮蓝绿色 fontSize: '30' } } }, }, //标签的指向线 labelLine: { normal: { show: false } }, data: [ { value: 60, name: '授权使用率', itemStyle: { //线性渐变,前四个参数分别是 x, y, x2, y2, 范围从 0 - 1,相当于百分比,如果 globalCoord 为'true',则该四个值是绝对的像素位置, color: { type: 'linear', x: 0, y: 0, x2: .1, y2: 1, colorStops: [{ offset: 0, color: '#4dcdfc' // 0% 处的颜色,蓝绿色 }, { offset: 1, color: '#3F77FE' // 100% 处的颜色,蓝色 }], globalCoord: true // 缺省为 false }, shadowColor: 'rgba(0,62,198,0.75)', //饼图的阴影颜色(本例是环形图),宝蓝色 shadowBlur: 10 //光影模糊度,本质就是阴影外延出去的长度 } }, { value: 28, name: '占位标签', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: .1, y2: 1, colorStops: [{ offset: 0, color: '#97d0fe' // 0% 处的颜色 }, { offset: 1, color: '#8ecdfe' // 100% 处的颜色 }], globalCoord: true // 缺省为 false }, shadowColor: 'rgba(0,62,198,0.75)', shadowBlur: 10 }, //这部分用于填充空白,不显示标签。 label: { normal: { show: false } } }, ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ```

el-table :formatter 与插槽template不能共用 用cell-style 不是实时 附颜色 怎么解决?

![图片说明](https://img-ask.csdn.net/upload/202005/21/1590059345_375516.png) el-table repross这列 是用了formatter 计算得到的值 还想判断 正值 用蓝色 负值用红色 用了插槽 但是 得不到计算的值 百度说不能同时用 然后用了 表格 带的 :cell-style![图片说明](https://img-ask.csdn.net/upload/202005/21/1590059508_152657.png) 上面的方法 是:formatter的 初始是0 靠其他列计算得到的值 下面的是 颜色的方法 但是 不能实时 正常的 附颜色 ![图片说明](https://img-ask.csdn.net/upload/202005/21/1590059621_701290.png) 进货盈亏 是负值 应该是红色 但是没变 ![图片说明](https://img-ask.csdn.net/upload/202005/21/1590059701_235393.png) 我继续输入 就第一列 的进货 盈亏就变红了 求帮助 附颜色的方法

关于在tab中使用echarts大小为0的问题

小弟最近写一个程序时需要实现一个在tab栏中切换不同的echarts图标的显示问题:在tab栏切换后再切换回来其父盒子div有大小,但是echarts大小为0x0; 同时自己再测了一下,当我跳转到没有echarts的页面再跳转回有echarts的后echarts能正常显示,但是从一个有echarts页面A跳到另一个有echarts的页面B第一次可以成功,但再从B跳会A时,A中其它元素可以正常显示,但是echarts就是显示不出来,已经卡了好几天了,网上的方法也试了一下不知道是不是自己试的方法对不对,拜托各位大神帮忙看看谢谢! ![图片说明](https://img-ask.csdn.net/upload/202003/09/1583726384_608296.png) ![图片说明](https://img-ask.csdn.net/upload/202003/09/1583726395_852700.png) 实现过程是用把echarts放在不同的div中,通过tab按下时捕获的值给current从而让相应的div中的图表显示出来: ``` <div v-if="current === 'month'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> ``` 当按下了相应的tab后,会调用相应的获取数据函数: ``` // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } ``` 在获取数据函数中最后调用了图表的初始化函数init: ``` async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来,在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来,在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, ``` 图表初始函数如下,其中写明了一些图表基础设置并进行setoption: ``` initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, ``` 最后再于图表的html部分中绑定了下面函数进行渲染: ``` handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, ``` 最后附上该页面完整代码,请大家帮忙看看谢谢~ ``` <template> <div class="historyContainer"> <div v-if="current === 'seven'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近七日过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近七日超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'month'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一月过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一月超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一季过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一季超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'halfyear'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近半年过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近半年超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'year'"> 这是一年 </div> <i-tab-bar fixed="true" :current="current" @change="handleChangeTabbar"> <i-tab-bar-item key="seven" icon="computer" current-icon="computer_fill" title="近一周"></i-tab-bar-item> <i-tab-bar-item key="month" icon="dynamic" current-icon="dynamic_fill" title="近一月"></i-tab-bar-item> <i-tab-bar-item key="quarter" icon="addressbook" current-icon="addressbook_fill" title="近一季"></i-tab-bar-item> <i-tab-bar-item key="halfyear" icon="setup" current-icon="setup_fill" title="近半年"></i-tab-bar-item> <i-tab-bar-item key="year" icon="mine" current-icon="mine_fill" title="近一年"></i-tab-bar-item> </i-tab-bar> </div> </template> <script> import echarts from 'echarts' import mpvueEcharts from 'mpvue-echarts'; import { post } from '@/api/request.js'; let barChart, accessBarChart, lineChart; export default { onLoad(options) { const { stationId, accessToken } = options; this.stationId = stationId; this.accessToken = accessToken; }, data() { return { current:'seven', stationId: '', accessToken: '', echarts, totalNum: 0, accessNum: 0, axleTotalNum: 0, axleAccessNum: 0, // type:7,//暂时默认七天 barOption: null, accessBarOption: null, lineOption: null } }, components: { mpvueEcharts }, mounted() { this.getChartData(7); }, methods: { initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, initAccessBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.accessBarOption = { title: { text: "近七日超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.accessBarOption = { title: { text: "近一月超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.accessBarOption = { title: { text: "近一季超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.accessBarOption = { title: { text: "近半年超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.accessBarCharts.init() }, handleAccessBarInit (canvas, width, height) { console.log("打印表1宽高"); console.log(this.wdith); console.log(this.height); accessBarChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(accessBarChart) accessBarChart.setOption(this.accessBarOption,true) return accessBarChart }, initLineChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.lineOption = { title: { text: "近7日车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==30){ this.lineOption = { title: { text: "近一月车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==90){ this.lineOption = { title: { text: "近一季车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==180){ this.lineOption = { title: { text: "近半年车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } this.$refs.lineCharts.init() }, handleLineInit (canvas, width, height) { console.log("打印表3宽高"); console.log(this.wdith); console.log(this.height); lineChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(lineChart) lineChart.setOption(this.lineOption,true) return lineChart }, async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来,在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来,在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } } } </script> <style> .historyContainer{ width: 100%; height: 100%; } .headerCard{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 30px; border: 1px solid #ccc; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .wrap{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; } .wrap1{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; margin-bottom: 50px } </style> ```

怎么实现echarts饼形图label字体两种颜色?

![图片说明](https://img-ask.csdn.net/upload/201706/08/1496915461_340359.png) 想用echarts做成这个效果。。夸何百分数与下方文字怎么都是一种颜色。。有什么办法可以设置成不同颜色可以吗?

百度Echarts插件中tooltip如何自定义

需求的要求是在tooltip中显示今天中位价和较昨日 而图例的名字是 “今天” series的name必须和图例是一样,该怎么自定义tooltip?

echarts 如何改变饼图引导线labelLine和label的位置,如下图

![图片说明](https://img-ask.csdn.net/upload/201801/18/1516244663_861154.png)

百度echarts画折线图显示不出来,画柱状图则正常

代码如下: ``` <div id="main" style="height:400px"></div> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require ( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { }; myChart.setOption(option); } ); </script> ``` option的代码直接从官方案例粘贴的,例如标准折线图 ``` title : { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' } } ], series : [ { name:'最高气温', type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint : { data : [ {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] ``` 然后这是我的结果: ![图片说明](https://img-ask.csdn.net/upload/201505/24/1432474513_131052.png) 这是官方的:![图片说明](https://img-ask.csdn.net/upload/201505/24/1432474655_901781.png)

echarts中connectNulls的问题

数据中存在多段空数据,但是我的需求是超过7天的空值数据不连接空值点,不超过7天的进行连接。 ``` option = { title: { text: '折线图' }, tooltip: { trigger: 'axis' }, legend: { data: [{ name: '测试', icon: 'rect' }] }, grid: { left: '10%', right: '10%', containLabel: true }, xAxis: { type: 'category', name: "日期", nameLocation: 'end', nameGap: 38, boundaryGap: true, axisLine: { show: false, onZero: false }, data: [ "2016-02-04", "2016-02-05", "2016-02-06", "2016-02-07", "2016-02-08", "2016-02-09", "2016-02-10", "2016-02-11", "2016-02-12", "2016-02-13", "2016-02-14", "2016-02-15", "2016-02-16", "2016-02-17", "2016-02-18", "2016-02-19", "2016-02-20", "2016-02-21", "2016-02-22", "2016-02-23", "2016-02-24", "2016-02-25", "2016-02-26", "2016-02-27", "2016-02-28", "2016-02-29", "2016-03-01", "2016-03-02", "2016-03-03", "2016-03-04", "2016-03-05", "2016-03-06", "2016-03-07", "2016-03-08", "2016-03-09", "2016-03-10", "2016-03-11", "2016-03-12", "2016-03-13", "2016-03-14", "2016-03-15", "2016-03-16", "2016-03-17", "2016-03-18", "2016-03-19", "2016-03-20", "2016-03-21", "2016-03-22", "2016-03-23", "2016-03-24", "2016-03-25", "2016-03-26", "2016-03-27", "2016-03-28", "2016-03-29", "2016-03-30", "2016-03-31", "2016-04-01", "2016-04-02", "2016-04-03", "2016-04-04", "2016-04-05", "2016-04-06", "2016-04-07", "2016-04-08", "2016-04-09", "2016-04-10", "2016-04-11", "2016-04-12", "2016-04-13", "2016-04-14", "2016-04-15", "2016-04-16", "2016-04-17", "2016-04-18", "2016-04-19", "2016-04-20", "2016-04-21", "2016-04-22", "2016-04-23", "2016-04-24", "2016-04-25", "2016-04-26", "2016-04-27", "2016-04-28", "2016-04-29", "2016-04-30", "2016-05-01", "2016-05-02", "2016-05-03", "2016-05-04", "2016-05-05", "2016-05-06", "2016-05-07", "2016-05-08", "2016-05-09", "2016-05-10", "2016-05-11" ], axisLabel: { show: true, formatter: function (value) { return value; }, showMinLabel: true, showMaxLabel: true } }, yAxis: { type: 'value' }, series: [ { name: '测试', type: 'line', symbol: "none", showAllSymbol:true, data: [ { "value": "67.8100", "symbol": "rect", "symbolSize": 11 }, "68.2200", "68.1600", "68.0700", "67.9300", "67.9100", null, null, null, null, null, null, null, null, null, "68.3300", "68.3600", "68.3300", "68.2400", "68.1700", "68.0900", "68.1700", "68.0800", "67.9600", "67.8700", "67.7700", "67.7500", "67.8400", "67.9500", "68.0200", "68.1500", "68.2900", "68.3000", "68.2300", "68.1300", "68.0200", "68.0100", "67.8700", "67.6900", "67.5400", null, null, null, "67.3300", "67.2800", "67.4400", "67.5100", "67.5300", "67.5200", "67.5100", "67.6000", "67.5400", "67.4600", "67.3100", "67.2400", "67.2400", "67.2100", "67.2200", "67.1700", "67.2100", "67.3700", "67.4800", "67.6100", "67.7200", "67.7700", "67.7700", "67.7800", "67.6400", "67.6600", "67.5900", "67.5000", "67.4600", "67.3700", "67.2000", "67.1500", "67.1100", "67.0600", "67.1100", "67.2400", "67.2800", "67.2800", "67.3500", "67.3200", "67.1000", "67.1000", "67.0400", "66.9300", "66.7400", "66.6900", "66.6900", "66.7400", "66.7900", "66.7900", "66.7100", "66.7100", "66.8000", "66.8600", { "value": "68.4700", "symbol": "rect", "symbolSize": 11 } ], } ] }; ``` ![图片说明](https://img-ask.csdn.net/upload/201801/09/1515466346_363347.png)

ie8下Echarts柱状图不显示,但折线和饼状图是可以的

disabledComposition: function () { var option = { tooltip: { trigger: 'item' }, calculable: true, grid: { borderWidth: 0, y: 80, y2: 60 }, xAxis: [ { type: 'category', show: false, data: ['听力残疾', '视力残疾', '智力残疾', '肢体残疾', '精神残疾', '言语残疾'] } ], yAxis: [ { type: 'value', show: false } ], series: [ { name: '人口数量统计', type: 'bar', itemStyle: { normal: { color: function(params) { var colorList = [ '#26C0C0','#259e2e','#FCCE10','#cccccc','#7b68ee','#00fa9a' ]; return colorList[params.dataIndex] }, label: { show: true, position: 'top', formatter: '{b}\n{c}' } } }, data: [2010,210,1080,40,100,108], markPoint: { data: [ {xAxis:0, y: 350, name:'听力残疾'}, {xAxis:1, y: 350, name:'视力残疾'}, {xAxis:2, y: 350, name:'智力残疾'}, {xAxis:3, y: 350, name:'肢体残疾'}, {xAxis:4, y: 350, name:'精神残疾'}, {xAxis:5, y: 350, name:'言语残疾'} ] } } ] }; var disabledCompositionEchart = echarts.init(document.getElementById("disabledComposition")); disabledCompositionEchart.setOption(option,true); } 上面是柱状图的代码,都严格了,没逗号的问题。。但ie8下还是出不来,求大神

echarts在3d地球中dispatchAction无效?

``` var globel = echarts.init(document.getElementById('globe')); const option = { // backgroundColor: '#000', visualMap: { show: false, min: 0, max: 60, inRange: { symbolSize: [1.0, 10.0], opacity:[1,0.5] } }, tooltip: { trigger: 'item', alwaysShowContent:true, formatter: function(prams,d,callback){ return prams.value }, }, globe: { baseTexture: require('../assets/world.png'), globeOuterRadius: 100, displacementScale: 0.1, viewControl:{ autoRotate:false }, postEffect:{ bloom:true, screenSpaceAmbientOcclusion:true }, shading: 'color', z: 9 }, series: { type: 'scatter3D', coordinateSystem: 'globe', blendMode: 'source-over', symbolSize: 2, itemStyle: { // color: 'rgb(148, 148, 148)', color:'#b4b4b4', opacity: 1 }, data: data } } ******************************* globel.dispatchAction({ type:'showTip', seriesIndex:0, dataIndex:1 }) ``` 如上,无论如何都无法用方法呼出tooltip,但是正常的item触发还是可以的

Echarts中柱状图与折线的中心位置偏移

![这是我目前实现的](https://img-ask.csdn.net/upload/201707/21/1500627674_544333.png) ![我想要的](https://img-ask.csdn.net/upload/201707/21/1500627700_23102.png) http://gallery.echartsjs.com/editor.html?c=xByIZomkL-&v=2 (Echarts的在线调试 可以保存后告诉我 ) 现在折线的点都在一个位置始终居中,想咨询怎么把每个折线点平移到对应的柱状图上。 就是一个分组中有分类 分类里有两个类别 第一个折线在第1,3,5的柱状图中心位置 第二条折线在2,4,6的柱状图中心位置 谢谢 什么感谢 代码附下: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 100%;height:600px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { tooltip : { show:false, trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:['WIFI','内置应用','系统设置','建议与咨询','用户反馈率'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['最新版本-2','最新版本-1','最新版本'] } ], yAxis : [ { type : 'value', axisLabel: { formatter: '{value}%' } }, ], series : [ { name:'WIFI', type:'bar', stack: 'one', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, barWidth:80, data:[100, 90, 70] }, { name:'内置应用', type:'bar', stack: 'one', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, data:[80, 70, 50] }, { name:'系统设置', type:'bar', stack: 'one', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, barWidth:80, data:[70, 50, 30] }, { name:'建议与咨询', type:'bar', stack: 'one', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, barWidth:80, data:[50, 40, 20] }, { name:'WIFI', type:'bar', stack: 'two', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, barWidth:80, data:[90, 80, 60] }, { name:'内置应用', type:'bar', stack: 'two', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, barWidth:80, data:[70, 60, 40] }, { name:'系统设置', type:'bar', stack: 'two', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, barWidth:80, data:[50, 40, 30] }, { name:'建议与咨询', type:'bar', stack: 'two', itemStyle: { normal: { label: { show: true, position: 'inside', formatter:function(params){ return params.seriesName+'\n'+params.value+"%"; } } } }, barWidth:80, data:[40, 30, 20] }, { name:'用户反馈率', type:'line', lineStyle: { normal: { type:'dashed' } }, smooth:false, markPoint:{ symbolOffset:['70%', '90%'] }, data:[300, 250, 170], }, { name:'用户反馈率', type:'line', lineStyle: { normal: { type:'dashed' } }, smooth:false, data:[250, 210, 150] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ```

用echarts画柱状对比图

![图片说明](https://img-ask.csdn.net/upload/201901/18/1547802607_234605.png) ![图片说明](https://img-ask.csdn.net/upload/201901/18/1547798448_217436.png) 第一张图是我做出来的 我只是希望Y轴的平分正负轴数不是0就好了,我想设置自己的起始轴,超过107.5分的就往上,低于107.5分的往下到它指定的位置,比如是105分,就往下面到105分的位置,超过107.5分的比如117.5分就上到117.5分就好 但是现在只能是从0开始,然后做正负数才可以这样,我不需要负数 var labelRight = { normal: { position: 'right' } }; option = { title: { text: '交错正负轴标签', subtext: 'From ExcelHome', sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { top: 80, bottom: 30 }, xAxis: { type : 'category', axisLine: {show: false}, axisLabel: {show: false}, axisTick: {show: false}, splitLine: {show: false}, data : ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one'] }, yAxis: { type : 'value', position: 'top', splitLine: {lineStyle:{type:'dashed'}}, }, series : [ { name:'生活费', type:'bar', stack: '总量', label: { normal: { show: true, formatter: '{b}' } }, data:[ {value: -0.07, label: labelRight}, {value: -0.09, label: labelRight}, 0.2, 0.44, {value: -0.23, label: labelRight}, 0.08, {value: -0.17, label: labelRight}, 0.47, {value: -0.36, label: labelRight}, 0.18 ] } ] };

Echarts前端图,地图的图标显示比例怎么调整。官网文档找不到在哪里,求前端朋友帮忙。

![图片说明](https://img-ask.csdn.net/upload/201712/11/1512954893_636177.png) 上面图标这个太大了,是因为数据源里面有的很大,有的很小。我通过哪里去调节这个大小的比例和显示亮的程度,辐射的区域呢? 官网类似这种链接是:http://echarts.baidu.com/demo.html#map-polygon 我觉得主要问题是我应该修改这里: series : [ { name: 'pm2.5', type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: function (val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: '#ddb926' } } }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 10)), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#f4e925', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ]

echarts折线图设置title背景色无效?

使用echarts折线图,给title设置样式的时候,发现backgroundColor不起作用,不知道是哪里出了问题,希望熟悉echarts的大牛能指点下,不胜感激! 我的代码效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576638105_803105.png) 想要实现的是箭头所指部分给加一个背景色,参考文档: https://www.echartsjs.com/zh/option.html#title.backgroundColor 我的配置项如下: ``` areaOption: { title: { text:'今天活动签到0人;昨天活动签到 100人', backgroundColor:'#649FFF', show:true, left: 'right',//这个太神奇了,设置标题居中的. padding:20, textStyle: { fontSize: 12, align: 'center', }, }, legend: { // 图例 data: ['正在举办的活动场数', '当天线上签到人数',] show:true, padding:20, left:20, data: [ { name:'正在举办的活动场数', icon:'circle', textStyle:{ color:'#666666', fontSize: 12, } }, { name: '当天线上签到人数', icon:'circle', textStyle:{ color:'#666666', fontSize: 12, } }, ] }, grid: { top: 60, right: 40, bottom: 20, left: 50, containLabel: true }, tooltip: { trigger: 'axis',//坐标轴触发 snap: true, //坐标轴指示器是否自动吸附到点上 confine: true,//是否将 tooltip 框限制在图表的区域内 axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985', shadowColor: '#42515d', formatter: '{value}' //显示x轴的值 }, }, //formatter: "{value}<br/> {a0} <br/>{b} : {c}次" }, xAxis: [ { type: 'category', boundaryGap: false, // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] data: [], axisLabel: {//刻度相关 interval: 0, rotate: 45, } } ], yAxis: [ { type: 'value', name: "正\n在\n举\n办\n的\n活\n动\n场\n数", nameLocation: "center", nameGap: 35, nameRotate: 0, nameTextStyle: { fontSize: 16, }, splitLine: { show: true, lineStyle:{ type:'dotted', opacity:0.2 }, }, minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 axisLabel: { formatter: function (v) { return parseInt(v); //0表示小数为0位,1表示1位小数,2表示2位小数 } }, axisPointer: { show: true, label: { show: true, precision: 0 //这个用来控制y轴小数点精度 } }, }, { type: 'value', name: "当\n天\n线\n上\n签\n到\n人\n数", nameLocation: "center", nameGap: 35, nameRotate: 0, nameTextStyle: { fontSize: 16, }, splitLine: { show: true, lineStyle:{ type:'dotted', opacity:0.2 }, }, minInterval: 1, axisLabel: { formatter: function (v) { return v.toFixed(0); //0表示小数为0位,1表示1位小数,2表示2位小数 } }, axisPointer: { show: true, label: { show: true, precision: 0 //这个用来控制y轴小数点精度 } }, } ], series: [ { name: '正在举办的活动场数', type: 'line', // smooth: true, yAxisIndex: 1, areaStyle: {normal: {opacity: 0.2}},//设置透明度 data: [], // data:[16,16,6,5,4,4,3,0,0,0,0,0], itemStyle: {normal: {label: {show: true}}}, //color: ['#E04445'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#649FFF' // 0% 处的颜色 }, { offset: 1, color: '#649fff' // 100% 处的颜色 }], globalCoord: true // 缺省为 false } ], connectNulls: true, // clip:false }, { name: '当天线上签到人数', type: 'line', // smooth: true, yAxisIndex: 0, areaStyle: {normal: {opacity: 0.2}},//设置透明度 data: [], // data:[35,15,8,12,11,6,3,0,0,0,0,0], itemStyle: {normal: {label: {show: true}}}, // color: ['#649FFF'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#E04445' // 0% 处的颜色 }, { offset: 1, color: '#ff494a' // 100% 处的颜色 }], globalCoord: true // 缺省为 false } ], connectNulls: true, } ] }, ```

ajax的值怎样传递到echarts中

在ajax中两个数组,分别是arr1,arr2;怎样将数组分别传递到echarts中的nodes:[]和links:[]中?求详细源码! 部分源码 ``` <div id="main" style="height:500px;"></div> <script src="./js/echarts.js" ></script> <script src="./js/jquery-1.8.3.min.js" ></script> <script> var arr1 = []; var arr2 = []; $.ajax({ type:"POST", async:false, url:"mapdata.php", dataType:"json", success: function(result){ var str = result; for (var i = 0; i < str.length; i++) { arr1.push("{"+"category:"+str[i].category,"name:'"+str[i].name+"'","value:"+str[i].value+"}"); } //document.write(arr1); for (var i = 0; i < str.length; i++) { arr2.push("{"+"source:'"+str[i].source+"'","target:'"+str[i].target+"'","weight:"+str[i].weight,"name:'"+str[i].name_nexus+"'"+"}"); } //document.write(arr2); }, error:function(errorMsg){ alert("请求数据失败!"); }, }); require.config({ paths:{ echarts:'./js' } }); require( [ 'echarts', 'echarts/chart/force' ], function(ec){ var myChart = ec.init(document.getElementById("main")); var option = { title : { text: '人物关系:葛优', x:'right', y:'bottom' }, tooltip : { trigger: 'item', formatter: '{a} : {b}' }, legend: { x: 'left', data:['家人','朋友'] }, series : [ { type:'force', name : "人物关系", ribbonType: false, categories : [ { name: '人物' }, { name: '家人' }, { name:'朋友' } ], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333' } }, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1 }, linkStyle: { type: 'curve' } }, emphasis: { label: { show: false }, nodeStyle : { //r: 30 }, linkStyle : {} } }, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[ arr1 ], links : [ ] } ] }; myChart.setOption(option); } ); </script> ``` arr1值为 ![图片说明](https://img-ask.csdn.net/upload/201607/18/1468831970_199619.png) arr2值为![图片说明](https://img-ask.csdn.net/upload/201607/18/1468832031_557252.png)

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# cad插入影像 c#设计思想 c#正则表达式 转换 c#form复制 c#写web c# 柱形图 c# wcf 服务库 c#应用程序管理器 c#数组如何赋值给数组 c#序列化应用目的博客园
立即提问