vue饼图组件_VUE图表绘制，选用哪种可视化组件好？VUE饼图柱图使用范例

最近一个项目中使用了VUE，并需要绘制图表，这就尴尬了，搜查了很多资料，发现网上使用的有：npm-c3，v-charts，sChart，D3等等多种多样，经过至少不下5中可视化组件尝试，发现最好用的还是Echarts。

主要原因：

1.有官方实例和API，资源丰富，遇到问题可快速解决

2.支持图标类型多样化，能满足项目扩展需求

3.图表操作灵活，配置项可封装，自由度高

废话少说，直接上代码吧，在这里就不说用npm引入echarts，自行百度吧，主要分享代码，这样方面大家参考，以柱图为例

VUE HTML部分：

style scoped>

#chart_example{

width: 100%;

height:100%;

}

js代码部分：

import echarts from 'echarts'

import echatrsMC from '../../mEchartsUtil2MC'//这个是我Echarts的封装

import util from '../../util'//这个是请求封装，可以不用管

export default {

data() {

return {}

},

mounted() {

let $this = this

// let myChart = echarts.init(document.getElementById('chart_example'))

let yData = ['我','叫','冒','菜','AND','我','L','O','V','E','I','T']

let xData = [1314, 521, 215, 125, 111, 55,16,10,5,3,2,1]

let idList = []

let mURL = '填写你要发送的请求'

util.ajax2MC('get',mURL, null, function (result) {//数据处理仅仅供参考

if(result.data){

yData = []

xData = []

for (let i = 0; i < result.data.length; i++) {

yData.push(result.data[i].psnNm)

xData.push(result.data[i].cost)

idList.push(result.data[i].psnId)

}

let option = echatrsMC.getOneBarOption(yData,xData)//封装代码中获取option实例

//特别注意下面三行代码要写到请求中，不然会出现echarts实例化dom元素了，但是数据没有绑定上，因为请求的数据还没返回echarts就已经实例了,这样写能解决该问题

var myChart = echarts.init(document.getElementById('chart_example'))

myChart.clear()

myChart.setOption(option,true)

myChart.on('click', function (params) {//绑定点击事件

let idx = params.dataIndex

let id = idList[idx]

console.log(id)

$this.$f7.views.main.router.reloadPage('/logsts/logStsPsnWork/'+id)//界面跳转，不用管

})

}

})

},

methods: {},

watch: {},

created() {

}

}

分享下封装的代码自行参考，util.js:

mport _ from 'lodash'

import axios from 'axios'

import * as copy from 'copy-to-clipboard'

import store from './store'

import routes from './routes.js'

import base64url from 'base64-url'

import cookie from 'js-cookie'

import qs from 'qs'

export default {

/**

* 异步请求调用

* @param type 请求类型 post/get

* @param method 方法名

* @param payload 请求内容

* @param callback 回调函数

*/

ajax2MC(type, method, payload, callback) {

let httpUrl, httpMethod

if(type === 'get'){

httpMethod = 'get'

} else {

httpMethod = 'post'

}

httpUrl = env.apiBaseUrl + '/' + method

this.log('调用参数' + payload)

this.log('请求URL：' + httpUrl)

window.f7.showIndicator()

let that = this

axios({

method: httpMethod,

url: httpUrl,

timeout: 1000 * 12, // 创建axios实例,设定超时时间是12s

data: qs.stringify(payload),

withCredentials:true,

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},

})

.then(function (response) {

window.f7.hideIndicator()

let returnFlag = response.data.code

let returnInfo = response.data.message

if (returnFlag === 0) {

callback(response.data)

} else if (returnFlag === 10) {

window.f7.confirm('

用户登录已失效

点击确定重新登录

window.f7.loginScreen()

})

} else {

window.f7.alert('

错误代码: ' + returnFlag + '

原因: ' + returnInfo + '

}

})

.catch(function (error) {

window.f7.hideIndicator()

that.log(error)

window.f7.alert('服务调用失败，请检查网络连接')

})

}

}

封装的echarts.js部分mEchartsUtil2MC.js：

export default {

getOneBarOption(yData,xData){

let barColorList = ['#3c9bd3','#3dc0e4','#66dede','#9aeb2','#fdd65d','#fb9479','#f6658b','#d956a5','#e085ca','#e3b4f0']//柱图色值

let barGridInfo = { //绘图区调整

x:80, //左留白

y:10, //上留白

x2:80, //右留白

y2:10 //下留白

}

//横向单柱图option

return{

tooltip : {

trigger: 'item' //悬浮提示框不显示

},

grid:barGridInfo,

xAxis : [

{

show:false,

type : 'value',

boundaryGap : [0, 0],

position: 'top'

}

],

yAxis : [

{

type : 'category',

data :yData,

axisLine:{

show:false,

textStyle: {

code:function(params) {

return barColorList[params.dataIndex]

}

}

}, //坐标轴

axisTick:[{ //坐标轴小标记

show:false

}],

axisLabel:{

textStyle:{

fontSize:'15',

color: '#3dc0e4'

}

}

}

],

series : [

{

name:'',

type:'bar',

tooltip:{show:false},

barMinHeight:10, //最小柱高

barWidth: 20, //柱宽度

barMaxWidth:100, //最大柱宽度

data:xData,

itemStyle:{

normal:{ //柱状图颜色

color:function(params) {

return barColorList[params.dataIndex]

},

label:{

show: true, //显示文本

position: 'right', //数据值位置

textStyle:{

color:function(params) {

return barColorList[params.dataIndex]

},

fontSize:'15'

}

}

}

}

}

]

}

},

getPieOption(btData){

return{

color:['#3c9bd3','#e085ca','#e3b4f0','#3dc0e4','#66dede','#9aeb2','#fdd65d','#fb9479','#f6658b','#d956a5'],

series : [

{

name: '',

type: 'pie',

radius : '75%',

center: ['50%', '50%'],

data:btData,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

}

}

}