npm:ude-charts | Skypack

README

一、引入

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)
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"
      :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"
      :yAxis="yAxisHist"
    ></ude-histogram>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      currentData: 20,
      speedTitle: {
        //标题大小
        text: "速度表",
        fontSize: 25,
        fontFamily: "Microsoft YaHei",
        color: "#fff",
      },
      speedFrame: {
        max: 120, //最大刻度,最小刻度0
        rangeColor: [
          { start: 0, end: 60, color: "#f00" },
          { start: 60, end: 100, color: "#ff0" },
          { start: 100, end: 120, 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: true, //鼠标移入动画
      },

      pieTitle: {
        text: "饼图",
        fontSize: 25,
        fontFamily: "Microsoft YaHei",
        color: "#fff",
      },
      pieFrame: {
        explainFont: "16px Microsoft YaHei", //说明文字字体
        rateFont: "16px Microsoft YaHei", //显示比例文字字体
      },

      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: {
        label: ["打野", "支援", "输出", "防御", "游走"],
        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: "李四",
        },
      ],
      lineFrame: {
        explainHeight: 30,
        explainFont: "16px Microsoft YaHei", //说明文字字体
      },

      histogramTitle: {
        text: "直方图",
        fontSize: 25,
        fontFamily: "Microsoft YaHei",
        color: "#fff",
      },
      histogramFrame: {
        explainHeight: 30,
        explainFont: "16px 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: "应到人数" },
      ],
      xAxis: {
        data: ["一月", "二月", "三月", "四月", "五月", "六月"],
        label: "月份",
        font: "16px Microsoft YaHei",
      },
      yAxis: {
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        label: "工资",
        font: "16px Microsoft YaHei",
      },
      yAxisHist: {
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        label: "人数",
        font: "16px Microsoft YaHei",
      },

      backgroundColor: "#fff",
    };
  },
};
</script>

<style>
canvas {
  padding: 5px 5px;
  margin: 10px 10px;
}
</style>

Usage no npm install needed!

README