//引入Vchart
import VeRing from 'v-charts/lib/ring.common.js'
Vue.component('VeRing', VeRing)
<template>
<div>
<navbar :title="title"></navbar>
<div>
<ve-ring
:data="chartData"
:extend="chartExtend"
:settings="chartSettings"
></ve-ring>
</div>
</div>
</template>
<script>
import navbar from '@/components/navbar.vue'
export default {
name: '',
components: {
navbar
},
props: {},
data() {
this.chartExtend = {
series: {
radius: ['50%', '70%'],
label: {
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
}
},
legend: {
data: []
},
color: ['#ffa768', '#3992e6', '#42c0c8', '#eceff2']
}
this.chartSettings = {
itemStyle: {
//配置一些样式
color: seriesIndex => {
if (seriesIndex.dataIndex === 0) {
return {
type: 'linear',
x: 0, //X轴起始坐标
y: 0, //Y轴起始坐标
x2: 1, //X轴终点坐标
y2: 1, //Y轴终点坐标
colorStops: [
{
offset: 0,
color: '#ffe791' // 0% 处的颜色
},
{
offset: 1,
color: '#ff985e' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
} else if (seriesIndex.dataIndex === 1) {
return {
type: 'linear',
x: 0, //X轴起始坐标
y: 0, //Y轴起始坐标
x2: 1, //X轴终点坐标
y2: 1, //Y轴终点坐标
colorStops: [
{
offset: 0,
color: '#3a88db' // 0% 处的颜色
},
{
offset: 1,
color: '#36aaff' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
} else if (seriesIndex.dataIndex === 2) {
return {
type: 'linear',
x: 0, //X轴起始坐标
y: 0, //Y轴起始坐标
x2: 1, //X轴终点坐标
y2: 1, //Y轴终点坐标
colorStops: [
{
offset: 0,
color: '#3dc3c4' // 0% 处的颜色
},
{
offset: 1,
color: '#44bec9' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
} else {
return {
type: 'linear',
x: 0, //X轴起始坐标
y: 0, //Y轴起始坐标
x2: 1, //X轴终点坐标
y2: 1, //Y轴终点坐标
colorStops: [
{
offset: 0,
color: '#f2f7fb' // 0% 处的颜色
},
{
offset: 1,
color: '#f2f7fb' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
}
}
}
return {
title: '图表',
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ 日期: '药品', 访问用户: 18 },
{ 日期: '标本', 访问用户: 32 },
{ 日期: '病人', 访问用户: 25 },
{ 日期: '其他', 访问用户: 25 }
]
},
chartColors: ['#333', '#666']
}
},
computed: {},
methods: {}
}
</script>
<style scoped lang="less"></style>
v-charts图表方法
最新推荐文章于 2023-11-09 10:16:02 发布