Vue中ECharts"/>
Vue中ECharts
Vue中ECharts-bar堆叠条形图的使用
- 引入
- 效果图
- 实现需求(框架修改或不提供部分)
- 实现源码
- html代码:
- javascript代码:
- css代码:
引入
下载安装:npm install echarts --save
全局引入:import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //引入组件
局部引入:
// 引入 ECharts 主模块 let echarts = require('echarts/lib/echarts') // 引入柱状图 require('echarts/lib/chart/bar') // 引入提示框、标题组件、图例 require('echarts/lib/component/tooltip') require('echarts/lib/component/graphic') require('echarts/lib/component/legend') ... // 按需引入
效果图
实现需求(框架修改或不提供部分)
1 实发只显示实发薪金,应发显示实发薪金、个人社保、个人所得税,公司承担显示5项
2 在每一个堆叠条形图上显示总计:建立一个新的总计条形,值为每一个模块的总值,但是令其不显示,只显示他的值,位置在insideBottom
3 提示框tooltip只显示有值的项
实现源码
(注释里解释了用法)
html代码:
<div class="echart-sheet"><!--堆叠条形图--><div id="main" style="width: 100%; height: 100%;"></div>
</div>
javascript代码:
data () {return {totalPay: '', // 所有金额welfare: '', // 福利金额realSalary: '', // 实发薪金personSecurity: '', // 个人社保公积金companySecurity: '', // 公司社保公积金incomeTax: '' // 个人所得税},created () {},mounted () {this.$nextTick(function() {this.drawPie('main')}) // 延迟调用},methods: {// 绘制柱状图drawPie(id) {this.charts = echarts.init(document.getElementById(id))let data1 = [this.realSalary, this.realSalary, this.realSalary] // 实发let data2 = ['', this.personSecurity, this.personSecurity] // 个人let data3 = ['', this.incomeTax, this.incomeTax] // 个人所得税let data4 = ['', '', thispanySecurity] // 公司社保let data5 = ['', '', this.welfare] // 福利// 总计的计算let dataSum = (function () {let datas = []for (let i = 0; i < data1.length; i++) {datas.push(data1[i] + data2[i] + data3[i] + data4[i] + data5[i])}return datas}())this.charts.setOption({tooltip: {trigger: 'axis',show: true,axisPointer: { // 坐标轴指示器,坐标轴触发有效type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'},formatter: function (params) {let relVal = params[0].namefor (let i = 0, l = params.length; i < l; i++) {if (params[i].value) {relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value}}return relVal} // 让为0的值不显示}, // 提示框legend: {data: ['实发薪金', '个人社保公积金', '个人所得税', '公司社保公积金', '福利']// selectedMode: false // 取消图例点击动态效果},grid: {top: '23%',left: '4%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: ['实发', '应发', '公司承担成本']},yAxis: {type: 'value',max: function(value) {return value.max * 0.5 // 因为统计功能使得最大刻度为原来的两倍,此处让其还原}},series: [{name: '实发薪金',type: 'bar',stack: 'sum',label: {normal: {formatter: function(params) {if (params.value > 0) {return params.value} else {return ''}}, // 为0时不显示show: true,position: 'insideRight'}},itemStyle: {color: '#2661FF'},barWidth: 40, // 宽度data: data1},{name: '个人社保公积金',type: 'bar',stack: 'sum',label: {normal: {formatter: function(params) {if (params.value > 0) {return params.value} else {return ''}}, // 为0时不显示show: true,position: 'insideRight'}},itemStyle: {color: '#638EFF'},barWidth: 40, // 宽度data: data2},{name: '个人所得税',type: 'bar',stack: 'sum',label: {normal: {formatter: function(params) {if (params.value > 0) {return params.value} else {return ''}}, // 为0时不显示show: true,position: 'insideRight'}},itemStyle: {color: '#99B6FF'},barWidth: 40, // 宽度data: data3},{name: '公司社保公积金',type: 'bar',stack: 'sum',label: {normal: {formatter: function(params) {if (params.value > 0) {return params.value} else {return ''}}, // 为0时不显示show: true,position: 'insideRight'}},itemStyle: {color: '#FFA722'},barWidth: 40, // 宽度data: data4},{name: '福利',type: 'bar',stack: 'sum',label: {normal: {formatter: function(params) {if (params.value > 0) {return params.value} else {return ''}}, // 为0时不显示show: true,position: 'insideRight'}},itemStyle: {color: '#FFCD81'},barWidth: 40, // 宽度data: data5},{name: '总计',type: 'bar',stack: 'sum',label: {normal: {// offset: [0, 0],show: true,position: 'insideBottom',formatter: '{c}',textStyle: { color: '#333333' }}},itemStyle: {normal: {color: 'rgba(128, 128, 128, 0)'}},data: dataSum}]})},}
css代码:
<style lang="scss">// 不多赘述,给div echart-sheet一个想要的宽高就行
</style>
更多推荐
Vue中ECharts
发布评论