说白了vue-echarts的使用与echarts相似 数据与参数0共通 就是使用的方法不同 当初在找使用方法找了半天 记录一下
(1)安装
npm install vue-echarts --save-dev
(2)引入
import ECharts from 'vue-echarts'
(3) 使用
<div style="height:263px">
<vue-echarts :options="POLAR_OPTIONS" :autoresize="true" />
</div>
<script>
export default {
name: 'TopCpu',
data () {
const POLAR_OPTIONS = {
tooltip: {},
grid: {
left: '30px',
right: '30px',
bottom: '30px',
containLabel: true,
},
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5],
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: '#9c9c9c',
},
},
axisLabel: {
// 坐标轴刻度标签的相关设置。
show: true,
interval: 0,
formatter: function (value) {
var res = value
if (res.length > 7) {
res = res.substring(0, 6) + '..'
}
return res
},
},
},
yAxis: [
{
type: 'value',
axisLine: {
symbol: ['none', 'arrow'], // 显示坐标轴箭头
symbolOffset: 13, // 箭头偏移
lineStyle: {
color: '#9c9c9c',
},
},
axisTick: {},
splitLine: {
show: false,
},
name: '(个)',
},
],
series: {
name: '数',
type: 'bar',
barWidth: '25%',
data: [1, 2, 3, 4, 5],
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#457ef2',
'#ff5a5e',
'#24b29c',
'#a055ed',
'#e8aa07',
]
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
textStyle: {
color: function (params) {
var colorList = [
'#457ef2',
'#ff5a5e',
'#24b29c',
'#a055ed',
'#e8aa07',
]
return colorList[params.dataIndex]
},
fontSize: 16,
},
},
},
},
},
}
return {
POLAR_OPTIONS,
}
},
}
</script>
效果图: