一、引入
main.js
1.全局引入
import UdeCharts from 'ude-charts'
Vue.use(UdeCharts)
2.按需引入
import{SpeedChart,PieChart,Doughnut,RadarChart,LineChart,Histogram} from 'ude-charts'
Vue.component(SpeedChart.name,SpeedChart)
Vue.component(PieChart.name,PieChart)
Vue.component(Doughnut.name,Doughnut)
Vue.component(RadarChart.name,RadarChart)
Vue.component(LineChart.name,LineChart)
Vue.component(Histogram.name,Histogram)
二、使用组件
<template>
<div id="app">
<ude-speedChart
:width="600"
:height="400"
:currentData="currentData"
:title="speedTitle"
:frame="speedFrame"
></ude-speedChart>
<ude-pieChart
:width="600"
:height="400"
:title="pieTitle"
:pieData="pieData"
:frame="pieFrame"
>
</ude-pieChart>
<ude-doughnut
:width="600"
:height="400"
:total="total"
:doughnutWidth="doughnutWidth"
:currentData="currentData"
:title="doughnutTitle"
:frame="doughnutFrame"
></ude-doughnut>
<ude-radaChart
:width="600"
:height="400"
:radaData="radaData"
:title="radaTitle"
:frame="radaFrame"
></ude-radaChart>
<ude-lineChart
:width="600"
:height="400"
:lineData="lineData"
:title="lineTitle"
:frame="lineFrame"
:xAxis="xAxis"
:yAxis="yAxis"
></ude-lineChart>
<ude-histogram
:width="600"
:height="400"
:title="histogramTitle"
:frame="histogramFrame"
:histogramData="histogramData"
:xAxis="xAxis"
:yAxisLeft="yAxisHist"
:yAxisRight="yAxisHistRight"
:lineData="lineData"
></ude-histogram>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
currentData: 20,
total: 100,
doughnutWidth: 60,
speedTitle: {
//标题大小
text: "速度表",
fontSize: 25,
fontFamily: "Microsoft YaHei",
color: "#fff",
},
speedFrame: {
maxSpeed: 100, //最大刻度,最小刻度0
rangeColor: [
{ start: 0, end: 60, color: "#f00" },
{ start: 60, end: 80, color: "#ff0" },
{ start: 80, end: 100, color: "#0f0" },
], //每段颜色 start---end 范围 start 最小0 最大是设置的max 指针和刻度颜色随设置的颜色变化 只用一种颜色可以是[{start: 0, end: 120, color: "#f00"}]
outerLineWidth: 10, //外圆宽度
innerLine: { width: 5, color: "#fff" }, //指针处内圆宽度和颜色
scaleFont: "18px LcdD", //刻度字体
content: { font: "30px LcdD" }, //显示数字的字体
mouseoverAnimation: false, //鼠标移入动画
},
pieTitle: {
text: "饼图",
fontSize: 25,
fontFamily: "Microsoft YaHei",
color: "#fff",
},
pieFrame: {
explainFont: "16px Microsoft YaHei",
rateFont: "10px Microsoft YaHei",
splitLineWidth: 2,
splitLineColor: "#091a29", //分割线颜色
backgroundColor: "#091a29",
},
pieData: [
{ data: 1, color: "#0ff", text: "item1" },
{
data: 2.8,
color: "yellow",
text: "item2",
},
{ data: 6, color: "#0f0", text: "item3" },
],
doughnutTitle: {
text: "环形图",
fontSize: 25,
fontFamily: "Microsoft YaHei",
color: "#fff",
},
doughnutFrame: {
foreColor: "#f00",
backColor: "#0f0",
explainHeight: 30, //说明文字区域高度
explainFont: "16px Microsoft YaHei", //说明文字字体
contentFont: "16px Microsoft YaHei", //内容
mouseoverAnimation: true, //鼠标移入动画
},
radaTitle: {
text: "雷达图",
fontSize: 25,
fontFamily: "Microsoft YaHei",
color: "#fff",
},
radaFrame: {
labels: ["打野", "支援", "输出", "防御", "游走"],
color: "#fff", //框架颜色
font: "16px Microsoft YaHei", //框架字体
explainHeight: 30,
explainFont: "16px Microsoft YaHei", //说明文字字体
},
radaData: [
{
data: [40, 40, 60, 80, 100],
color: "rgba(255,0,0,0.5)",
label: "后羿",
},
{
data: [100, 80, 60, 40, 80],
color: "rgba(0,255,0,0.3)",
label: "兰陵王",
},
],
lineTitle: {
text: "折线图",
fontSize: 25,
fontFamily: "Microsoft YaHei",
color: "#fff",
},
lineData: [
{
data: [20, 30, 40, 50, 60, 70],
color: "#f00",
lineWidth: 2,
label: "张三",
},
{
data: [30, 50, 70, 60, 30, 80],
color: "#ff0",
lineWidth: 2,
label: "李四",
},
],
yAxis: {
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
label: "工资",
labelFont: "12px Microsoft YaHei",
axisFont: "12px Microsoft YaHei",
},
lineFrame: {
explainHeight: 30,
explainFont: "16px Microsoft YaHei", //说明文字字体
xBKGridlines: true,
yBKGridlines: true,
bkGridlinesColor: "#aaa",
mouseoverAnimation: true, //鼠标移入动画
},
histogramTitle: {
text: "直方图",
fontSize: 25,
fontFamily: "Microsoft YaHei",
color: "#fff",
},
histogramFrame: {
explainHeight: 30,
explainFont: "12px Microsoft YaHei", //说明文字字体
xBKGridlines: true,
yBKGridlines: true,
bkGridlinesColor: "#aaa",
},
histogramData: [
{ data: [20, 30, 40, 50, 60, 70], color: "#f00", label: "标准人数" },
{ data: [15, 10, 25, 30, 40, 80], color: "#00f", label: "实际人数" },
{ data: [20, 15, 26, 30, 40, 55], color: "#ff0", label: "应到人数" },
],
HistlineData: [10, 20, 30, 40, 50, 60, 70],
xAxis: {
data: ["一月", "二月", "三月", "四月", "五月", "六月"],
label: "月份",
labelFont: "12px Microsoft YaHei",
axisFont: "12px Microsoft YaHei",
showModel: "normal",
},
yAxisHist: {
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
label: "人数",
labelFont: "16px Microsoft YaHei",
axisFont: "12px Microsoft YaHei",
showModel: "normal",
},
yAxisHistRight: {
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
label: "达成率",
labelFont: "16px Microsoft YaHei",
axisFont: "12px Microsoft YaHei",
showModel: "normal",
},
backgroundColor: "#fff",
};
},
methods: {},
};
</script>
<style>
canvas {
padding: 5px 5px;
margin: 10px 10px;
}
</style>