vue echar使用

<el-col :span="8">
<el-card class="dashBordCard charCard">
<div slot="header" class="clearfix"><span>周工作分析</span></div>
<div>
<ve-line height="300px" :data="chartData1" :extend="charExtend"></ve-line>
</div>
</el-card>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-card class="dashBordCard">
<div slot="header" class="clearfix"><span>解读完成占比</span></div>
<div>
<ve-gauge height="280px" :data="chartData2" theme-name="macarons" :settings="chartSettings"></ve-gauge>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="dashBordCard">
<div slot="header" class="clearfix"><span>健康扶贫占比</span></div>
<div>
<ve-gauge height="280px" :data="chartData3" theme-name="macarons" :settings="chartSettings"></ve-gauge>
</div>
</el-card>

return {
rateVal: 4.3,
chartData: {
columns: [‘类型‘, ‘数量‘],
rows: [{
‘类型‘: ‘新增‘,
‘数量‘: 10
},
{
‘类型‘: ‘解读中‘,
‘数量‘: 5
},
{
‘类型‘: ‘已完成‘,
‘数量‘: 35
}
]
},
chartData1: {
columns: [‘日期‘, ‘解读报告总数‘, ‘健康扶贫次数‘, ‘有偿解读次数‘],
rows: [{
‘日期‘: ‘周一‘,
‘解读报告总数‘: 5,
‘健康扶贫次数‘: 3,
‘有偿解读次数‘: 2
},
{
‘日期‘: ‘周二‘,
‘解读报告总数‘: 5,
‘健康扶贫次数‘: 3,
‘有偿解读次数‘: 2
},
{
‘日期‘: ‘周三‘,
‘解读报告总数‘: 7,
‘健康扶贫次数‘: 2,
‘有偿解读次数‘: 5
},
{
‘日期‘: ‘周四‘,
‘解读报告总数‘: 7,
‘健康扶贫次数‘: 3,
‘有偿解读次数‘: 4
},
{
‘日期‘: ‘周五‘,
‘解读报告总数‘: 6,
‘健康扶贫次数‘: 2,
‘有偿解读次数‘: 4
}
]
},
chartData2: {
columns: [‘type‘, ‘value‘],
rows: [{
type: ‘percent‘,
value: 60
}]
},
chartData3: {
columns: [‘type‘, ‘value‘],
rows: [{
type: ‘percent‘,
value: 34
}]
},
chartSettings: {
labelMap: {
‘percent‘: ‘占比‘
},
dataName: {
‘percent‘: ‘%‘
}
},
charExtend: {
legend: {
icon: ‘rectangle‘,

right: ‘4%‘,
textStyle: {
fontSize: 12,
color: ‘#ffffff‘
}
},

series: {
radius: ‘50%‘,
center: [‘50%‘, ‘50%‘],
itemStyle: {
normal: {
color: function(params) {
const colorList = [‘#fddd‘, ‘#D7504B‘, ‘#69e575‘, ‘#F4E001‘, ‘#F0805A‘, ‘#26C0C0‘]
return colorList[params.dataIndex]
}
}
}
}
}
}
}

vue echar使用

原文：https://www.cnblogs.com/xzhce/p/13083008.html