关键词：
1.源码
1.说明
- 只提供子组件代码，totalData 是从父组件传输过来的数据，其数据格式如下:
父组件的代码就不提供了
2.代码
main.js 引入echarts
import * as echarts from 'echarts'// 在import的后面，echarts的前面加一个 * as
Vue.prototype.$echarts = echarts
vue子组件代码：
-
html
<div id="totalCharts" style="width: 100%;height:300px;"></div>
<div id="timesCharts" style="width: 100%;height:300px;">123</div>
<div id="totalDataCharts" style="width: 100%;height:400px;" />
-
js代码
<script> export default name: 'totalPie', props: ['totalData'], data () return totalPayOption: title: text: '总支付金额数据[单位：元]', left: 'center', , tooltip: trigger: 'item', formatter: 'a <br/>b: c (d%)', , legend: orient: 'vertical', left: 10, data: ['总支付金额', '总退款金额', '总实收金额'], , series: [ name: '总支付金额', type: 'pie', radius: [0, '40%'], label: show: true, position: 'inner', , labelLine: show: false, , data: [], emphasis: itemStyle: shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', , , , name: '总支付金额', type: 'pie', radius: ['55%', '70%'], label: show: false, position: 'inner', , labelLine: show: false, , data: [], ], , totalTimesOption: title: text: '总支付笔数数据', left: 'center', , tooltip: trigger: 'item', formatter: 'a <br/>b: c (d%)', , legend: orient: 'vertical', left: 10, data: ['总支付笔数', '总退款笔数'], , series: [ name: '支付笔数', type: 'pie', radius: '70%', label: position: 'inner', , labelLine: show: false, , data: [], emphasis: itemStyle: shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', , , ], , totalOption: tooltip: trigger: 'axis', axisPointer: type: 'cross', crossStyle: color: '#999', , , , title: text: '每天支付数据汇总统计', , legend: bottom: 10, data: ['支付总额', '退款总额', '实收金额', '支付笔数', '退款笔数'], , toolbox: show: true, orient: 'vertical', left: 'right', top: 'center', feature: dataView: show: true, readOnly: false, , magicType: show: true, type: ['line', 'bar'], , restore: show: true, , saveAsImage: show: true, , , , xAxis: [ type: 'category', data: [], axisPointer: type: 'shadow', , ], yAxis: [ type: 'value', name: '金额/元', axisLabel: formatter: 'value 元', , , type: 'value', minInterval: 1, axisLabel: formatter: 'value 笔', , ], series: [ emphasis: itemStyle: shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', , , ], , , /* 监听数据变化，实时渲染图表 */ watch: /* totalData (newValue, oldValue) this.setTotalCharts(newValue) , */ totalData: handler (newValue, oldValue) this.setTotalCharts(newValue) , immediate: true, , , mounted () this.showTotalPayCharts() this.showTotalTimesCharts() this.showTotalCharts() , methods: showTotalPayCharts () // 基于准备好的dom，初始化echarts实例 const payCharts = this.$echarts.init(document.getElementById('totalCharts'))// 也可以通过$refs.newCharts的方式去获取到dom实例。 payCharts.setOption(this.totalPayOption,true) , showTotalTimesCharts () const timesChart = this.$echarts.init(document.getElementById('timesCharts')) timesChart.setOption(this.totalTimesOption,true) , showTotalCharts () const totalDataCharts = this.$echarts.init(document.querySelector('#totalDataCharts')) totalDataCharts.setOption(this.totalOption,true) , /* 注意：echarts不会自动帮你渲染数据的，需要手动再次调用setOption函数 所以每次都要重新init()，然后再次调用setOption() */ setTotalCharts (totalData) /* 饼图数组 */ const innerPayData = [] const outterPayData = [] const timesData = [] /* 柱状图数据 */ const series = [] const x = [] if (totalData.totals.length > 0) // region 给饼图和柱状图的option赋值 /* 总支付金额数据饼图 */ /* 将饼图数据赋值给数组 */ for (let i = 0; i < this.totalPayOption.legend.data.length; i++) const pieInnerData = const pieOutterData = if (this.totalPayOption.legend.data[i] === '总支付金额') pieInnerData.value = this.totalData.totalPay pieInnerData.name = '总支付金额' if (this.totalPayOption.legend.data[i] === '总退款金额') pieOutterData.value = this.totalData.totalRefund pieOutterData.name = '总退款金额' if (this.totalPayOption.legend.data[i] === '总实收金额') pieOutterData.value = this.totalData.totalReal pieOutterData.name = '总实收金额' innerPayData.push(pieInnerData) outterPayData.push(pieOutterData) /* 将饼图数据数组中的值赋值给饼图的data */ this.totalPayOption.series[0].data = innerPayData this.totalPayOption.series[1].data = outterPayData /* 总支付笔数数据饼图 */ /* 将饼图数据赋值给数组 */ for (let i = 0; i < this.totalTimesOption.legend.data.length; i++) const pieData = if (this.totalTimesOption.legend.data[i] === '总支付笔数') pieData.value = this.totalData.totalTime pieData.name = '总支付笔数' if (this.totalTimesOption.legend.data[i] === '总退款笔数') pieData.value = this.totalData.totalRefundTime pieData.name = '总退款笔数' timesData.push(pieData) this.totalTimesOption.series[0].data = timesData /* 给柱状图赋值 */ for (let i = 0; i < totalData.totals.length; i++) x.push(totalData.totals[i].day.substring(totalData.totals[i].day.length - 11, totalData.totals[i].day.length - 9)) /* 将数组暂存于数组中 */ for (let i = 0; i < this.totalOption.legend.data.length; i++) const serie = if (this.totalOption.legend.data[i] === '支付笔数' || this.totalOption.legend.data[i] === '退款笔数') serie.name = this.totalOption.legend.data[i] serie.type = 'line' serie.yAxisIndex = 1 else serie.name = this.totalOption.legend.data[i] serie.type = 'bar' const data = [] for (let j = 0; j < totalData.totals.length; j++) if (this.totalOption.legend.data[i] === '支付笔数') data.push(totalData.totals[j].payTime) else if (this.totalOption.legend.data[i] === '支付总额') data.push(totalData.totals[j].totalMoney) else if (this.totalOption.legend.data[i] === '退款总额') data.push(totalData.totals[j].refundMoney) else if (this.totalOption.legend.data[i] === '实收金额') data.push(totalData.totals[j].totalReal) else if (this.totalOption.legend.data[i] === '退款笔数') data.push(totalData.totals[j].refundTimes) serie.data = data series.push(serie) this.totalOption.title.text = `$totalData.totals[0].day.substr(0, 4)年$totalData.totals[0].day.substr(5, 2)月每天支付数据汇总统计` this.totalOption.series = series this.totalOption.xAxis[0].data = x // endregion // region 数据渲染 this.showTotalPayCharts() this.showTotalTimesCharts() this.showTotalCharts() // endregion else // region 数据置空 /* 传输的数据为空的时候一定要置空，以清除内存中的数据 */ this.totalPayOption.series[0].data = [...[]] this.totalPayOption.series[1].data = [...vue2+echarts：后台传递一天有多类数据的时候，如何渲染柱状图(代码片段)1.需求描述后台传输过来的json数据：一天可能有多个支付渠道进行交易，从而产生交易记录每天的支付渠道类型不定，需要进行判断需求描述：两个展示各渠道支付环境（支付渠道可能有多重）的柱状图&#x... 查看详情
vue2.x实战之后台管理系统开发(代码片段)
...0Element——UI框架，饿了么出品，我所使用的版本是：1.2.8Echarts——图表插件，百度出品，我所使用的版本是：3.4.0在UI框架的选择上，除了Element，iView也不错，大家可以 查看详情
json前后台传输，以及乱码中文问题探讨
...统项目开发，没有用到框架。最近在做项目时，经常需要使用ajax从后台拿数据到前台，是json格式的。先说下我在项目中遇到的问题吧，前台拿到了数据，需要将其转化为对象，我使用的了jquery插件带有的jQuery.parseJSON（）这个方... 查看详情
vue2.0之echarts使用(代码片段)
1.首先下载echart依赖npminstallecharts--save备注:npm安装报错时使用cnpm 2.全局注册在main.js里引入echart并在vue中注册echart //引入echarts importechartsfrom‘echarts‘; Vue.p 查看详情
iOS 中的后台获取和后台传输以在后台下载数据 (JSON)
...个应用程序升级到iOS7并考虑尝试新的多任务API。我计划使用后台获取或静默推送通知来使我的内容保持最新。基本上是一组JSON值。我浏览的大部 查看详情
使用的是vue2.0，请问.vue文件中如何使用echarts
参考技术Amain.jsimportechartsfrom"echarts"A.vueHTML<divid="charts"><divid="main":style="width:'600px',height:'400px'"></div></div>javascriptexportdefaultdata()returnmsg:"123",mounted()varmyChart=echarts.ini... 查看详情
如何修改echarts的雷达图背景
参考技术AEcharts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。步骤：后台取到数据，转化为json；前台获取到json，改写Echarts调用的js； 查看详情
struts2框架json传递后台数据到echarts(代码片段)
echarts是百度公司提供的一个开源的大数据可视化图标展示工具，是百度大数据可视化的关键工具（点击打开链接）。最近因为项目需要要做可视化，就用了这个工具，发现效果还可以。回顾当初自己入门echarts... 查看详情
echarts动态加载后台数据
注意：1、用Ajax请求获取后台数据2、Echarts只能处理Json数据后台Controller：根据业务需求不同而返回不同数据，我前台要循环遍历Echarts的series进行数据添加，所以后台返了个二维数组过去。前端JSP页面：为Echarts准备一个具有高宽... 查看详情
在vue中使用百度echarts
参考技术A前言：在vue2.0中使用百度echarts有三种解决方案。这样每次都要获取图表dom元素然后通过setOption渲染数据，最后在mounted中初始化。很麻烦。vue-echarts是ECharts的Vue.js组件，基于EChartsv4.1.0+开发，依赖Vue.jsv2.2.6+，意思就是可... 查看详情
echarts.js这么调成反方向动画
参考技术A p>Echarts是前端的图表，只要从后台向前台传递json数据，解析下绑定到Echarts上，百度上有Demo的；前台获取到json，即可显示效果。步骤，改写Echarts调用的js，转化为json：后台取到数据追问运动轨迹能不能换一个方... 查看详情
vue2.0全局引入echarts以及按需引用echarts(代码片段)
echarts官方文档中的“在webpack中使用eCharts” 链接 http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts在所需项目中安装完了之后：全局引用main.js中配置importechartsfrom‘echarts‘// 查看详情
c#后台getpostputdelete传输发送json数据
一、Get方式传输 //url为请求的网址，param参数为需要查询的条件（服务端接收的参数，没有则为null）//返回该次请求的响应publicstringHttpGet(stringurl,Dictionary<String,String>param){if(param!=null)//有参数的情况下，拼接url{... 查看详情
echarts雷达图怎么在类目值下面显示数值
参考技术AEcharts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。步骤：后台取到数据，转化为json；前台获取到json，改写Echarts调用的js； 查看详情
struts2框架json传递后台数据到echarts(代码片段)
echarts是百度公司提供的一个开源的大数据可视化图标展示工具，是百度大数据可视化的关键工具（点击打开链接）。最近因为项目需要要做可视化，就用了这个工具，发现效果还可以。回顾当初自己入门echarts... 查看详情
echarts使用本地json文件无法显示地图
json地图在本地硬盘上C:\Users\admin\Desktop\echarts-m-1.0.0\source\util\mapData\geoJson目录下，打开后始终显示空白，码子如下：图片有点大，点击开大图可显示源码参考技术A显示什么问题？我之前遇到的就是引用echar... 查看详情
程序员接私活必备的10个开源项目，很多人还不知道！
...，幸运的是有很多开源免费的后台控制面板可以给开发者使用，那么有哪些优秀的开源免费的控制面板呢？我在Github上收集了一些优秀的后台控制面板，并总结得出Top10。GithubStar数24969，非常流行的基于Bootstrap3.x的免费的后台UI... 查看详情
echarts的标签视觉引导线的位置可以修改吗
...; 可以看看 不知道能不能解决你的问题 参考技术BEcharts是前端的图表，百度上有Demo的，只要从后台向前台传递json数据，解析下绑定到Echarts上，即可显示效果。步骤：后台取到数据，转化为json；前台获取到json，改写Echart... 查看详情