uchart、常用图标及其配置 uniapp

<template>
	<view style="width: 100%;height: 100%;">
		<qiun-data-charts :canvas2d='true' canvasId='canvans4' type="" :opts="opts" :chartData="chartData" />
	</view>
</template>

层级问题：

图标会覆盖在元素之上，添加canvasId，开启2d =》canvas2d，此处的配置项最好不要动态匹配

 :canvas2d='true' canvasId='canvans4'

图表类型：

type=""

示例一：折线图

<template>
	<view style="width: 100%;height: 100%;">
		<qiun-data-charts :canvas2d='true' canvasId='canvans4' type="area" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#1890FF"],
        padding: [15, 25, 10, 10],
        rotate: false, //横屏模式
        animation: true, // 是否动画展示图表
        dataLabel: false, // 是否显示图表区域内数据点上方的数据文案
        dataPointShape: true, //是否显示数据点的图形标识
        dataPointShapeType: 'hollow', //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
        legend: {
          show: false
        },
        xAxis: {
          disabled: false, // 不绘制X轴 默认false
          disableGrid: true, // 不绘制纵向网格
          axisLineColor: '#0f5681', // 坐标轴轴线颜色
          calibration: false, // 坐标轴刻度线
          fontColor: '#FFFFFF', // 字体颜色
          fontSize: 13, // 字体大小
          rotateLabel: false, //【旋转】数据点（刻度点）文字
          rotateAngle: 45, //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
          // labelCount: ,//数据点文字（刻度点）单屏幕限制显示的数量
          scrollShow: false, // 是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
          boundaryGap: 'justify', //折线图、区域图起画点结束点方法，可选值：'center'两端留空,'justify'两端对齐
        },
        yAxis: {
          disabled: false, //不绘制Y轴
          disableGrid: false,//不绘制横向向网格(即默认绘制网格)
          gridType: "dash", // 横向向网格线型，可选值：'solid'实线,'dash'虚线
          dashLength: 8, //横向网格为虚线时，单段虚线长度
          gridColor: '#0f5681',
          showTitle: true,
          data: [ // 多Y轴配置
            {
              axisLineColor: '#0f5681', // 坐标轴轴线颜色，默认#CCCCCC
              calibration: false, // 刻度线是否显示
              fontColor: '#FFFFFF', // 数据点（刻度点）字体颜色，默认#666666
              fontSize: 13, // 数据点（刻度点）字体大小
              textAlign: 'right', //数据点（刻度点）相对轴线的对齐方式，可选值：'left','right','center'
              title: 'PUE值', // 当前Y轴标题（需要上面showTitle设置为true）
              titleFontSize: 13, // 标题字体大小
              titleOffsetY: -2, // 标题纵向偏移距离，负数为向上偏移，正数向下偏移
              titleOffsetX: 0, // 标题横向偏移距离，负数为向左偏移，正数向右偏移
              titleFontColor: '#FFFFFF', //标题字体颜色，默认#666666
              unit: '', //Y轴刻度值后附加单位
            }
          ]
        },
        extra: {
          area: {
            type: "straight", // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
            opacity: 0.1, // 	区域图透明度
            addLine: true, // 是否叠加相应的折线
            width: 2, // 叠加的折线宽度
            gradient: true, // 是否开启区域图渐变色
            activeType: "hollow" // 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
          }
        }
      }
    }
  },
  props: {
    xValue: {
      type: Array,
      default: () => ["11/20","11/21","11/22","11/23","11/24","11/25","11/26"]
    },
    yValue: {
      type: Array,
      default: () => [35, 8, 25, 37, 4, 20, 15]
    }
  },
  watch: {
    yValue: {
      handler() {
        this.setChartsData()
      },
      immediate: true
    }
  },
  methods: {
    setChartsData() {
      this.chartData = {
        categories: this.xValue,
        series: [
          {
            name: "PUE值",
            data: this.yValue,
            // color: '#01ecf2',
            labelShow: false,
            lineType: 'solid', // 折线线型，可选值：'solid'为实线,'dash'为虚线，仅针对line,area,mix有效
            textColor: '#FFFFFF', //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
            pointShape: 'circle', //数据点标识样式，可选值为diamond◆, circle●, triangle▲, square■, none 无
          }
        ]
      }
    }
  }
}
</script>

 示例二：饼状图

<template>
  <view style="width: 100%; height: 100%">
    <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#a743ea", "#eb9327", "#eadb36", "#0cd689"],
        fontColor: "#c5ddf5", // 全局默认字体颜色，16进制颜色格式
        padding: [5, 5, 5, 5],
        rotate: false, //横屏模式
        animation: true, // 是否动画展示图表
        dataLabel: true, // 是否显示图表区域内数据点上方的数据文案
        legend: {
          show: true,
          position: "bottom", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
          float: "center", // 图例位置对齐方向，可选值：'center','left','right','top','bottom'
          padding: 5, //图例内填充边距
          margin: 5, // 图例外侧填充边距
          backgroundColor: "rgba(0,0,0,0)", // 图例背景颜色
          borderColor: "rgba(0,0,0,0)", // 图例边框颜色
          borderWidth: 0, // 图例边框线宽
          fontSize: 13, // 字体大小
          fontColor: "#c5ddf5", // 字体颜色
          lineHeight: 11, // 字体行高
          hiddenColor: "#CECECE", // 点击隐藏时图例标识及文字颜色
          itemGap: 15, // 各个分类（类别）之间的间隔
        },
        extra: {
          pie: {
            activeOpacity: 0.5, // 启用Tooltip点击时，突出部分的透明度
            activeRadius: 10, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
            offsetAngle: 0, // 起始角度偏移度数，顺时针方向，起点为3点钟位置为0度（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）
            // customRadius: 0, // 自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全）
            labelWidth: 10, // 数据标签到饼图外圆连线的长度
            border: true, // 是否绘制各类别中间的分割线
            borderWidth: 3, // 分割线的宽度
            borderColor: "#0879be", // 分割线的颜色
            linearType: "custom", // 渐变类型，可选值："none"关闭渐变,"custom"开启渐变
            // customColor: [], //自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
          },
        },
      },
    };
  },
  props: {
    pieData: {
      type: Array,
      default: () => [
        {
          name: "IT电能",
          value: 23,
        },
        {
          name: "末端电能",
          value: 20,
        },
        {
          name: "冷源电能",
          value: 29,
        },
        {
          name: "其他电能",
          value: 10,
        },
      ],
    },
  },
  watch: {
    pieData: {
      handler() {
        this.setChartData();
      },
      immediate: true,
    },
  },
  methods: {
    // 设置数据 渲染图表
    setChartData() {
      this.chartData = {
        series: [
          {
            data: this.pieData,
          },
        ],
      };
    },
  },
};
</script>

示例三：百分比折线图

<template>
  <view style="width: 100%; height: 100%">
    <qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#01e8ec"],
        padding: [20, 25, 10, 10],
        rotate: false, //横屏模式
        animation: true, // 是否动画展示图表
        dataLabel: false, // 是否显示图表区域内数据点上方的数据文案
        dataPointShape: true, //是否显示数据点的图形标识
        dataPointShapeType: "hollow", //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
        legend: {
          show: false,
        },
        xAxis: {
          disabled: false, // 不绘制X轴 默认false
          disableGrid: true, // 不绘制纵向网格
          axisLineColor: "#0746a3", // 坐标轴轴线颜色
          calibration: false, // 坐标轴刻度线
          fontColor: "#FFFFFF", // 字体颜色
          fontSize: 13, // 字体大小
          rotateLabel: false, //【旋转】数据点（刻度点）文字
          rotateAngle: 45, //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
          labelCount: 7, //数据点文字（刻度点）单屏幕限制显示的数量
          scrollShow: false, // 是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
          boundaryGap: "justify", //折线图、区域图起画点结束点方法，可选值：'center'两端留空,'justify'两端对齐
        },
        yAxis: {
          disabled: false, //不绘制Y轴
          disableGrid: true, //不绘制横向向网格(即默认绘制网格)
          gridType: "dash", // 横向向网格线型，可选值：'solid'实线,'dash'虚线
          dashLength: 8, //横向网格为虚线时，单段虚线长度
          gridColor: "#0f5681",
          showTitle: true,
          data: [
            // 多Y轴配置
            {
              axisLineColor: "#0746a3", // 坐标轴轴线颜色，默认#CCCCCC
              calibration: false, // 刻度线是否显示
              fontColor: "#FFFFFF", // 数据点（刻度点）字体颜色，默认#666666
              fontSize: 13, // 数据点（刻度点）字体大小
              textAlign: "right", //数据点（刻度点）相对轴线的对齐方式，可选值：'left','right','center'
              title: "预计节能百分比", // 当前Y轴标题（需要上面showTitle设置为true）
              titleFontSize: 13, // 标题字体大小
              titleOffsetY: -7, // 标题纵向偏移距离，负数为向上偏移，正数向下偏移
              titleOffsetX: 20, // 标题横向偏移距离，负数为向左偏移，正数向右偏移
              titleFontColor: "#FFFFFF", //标题字体颜色，默认#666666
              unit: "", //Y轴刻度值后附加单位
              min: 0, // 当前Y轴起始值（默认数据中的最小值）
            },
          ],
        },
        extra: {
          area: {
            type: "straight", // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
            opacity: 0.1, // 	区域图透明度
            addLine: true, // 是否叠加相应的折线
            width: 2, // 叠加的折线宽度
            gradient: true, // 是否开启区域图渐变色
            activeType: "hollow", // 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
          },
        },
      },
    };
  },
  props: {
    xValue: {
      type: Array,
      default: () => ["8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00"],
    },
    yValue: {
      type: Array,
      default: () => [0.1, 0.06, 0.08, 0.1, 0.12, 0.11, 0.1, 0.08, 0.07, 0.06, 0.1],
    },
  },
  watch: {
    yValue: {
      handler() {
        this.setChartsData();
      },
      immediate: true,
    },
  },
  methods: {
    setChartsData() {
      this.chartData = {
        categories: this.xValue,
        series: [
          {
            name: "预计节能百分比",
            data: this.yValue,
            // color: '#01ecf2',
            labelShow: false,
            lineType: "solid", // 折线线型，可选值：'solid'为实线,'dash'为虚线，仅针对line,area,mix有效
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
            pointShape: "circle", //数据点标识样式，可选值为diamond◆, circle●, triangle▲, square■, none 无
          },
        ],
      };
    },
  },
};
</script>

示例四:柱状图

<template>
  <view style="width: 100%; height: 100%">
    <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#0968f6", "#f5735d", "#f1e58c", "#48ccf7"],
        padding: [2, 25, 10, 10],
        animation: true, // 是否动画展示图表
        dataLabel: false, // 是否显示图表区域内数据点上方的数据文案
        legend: {
          show: true,
          fontColor: "#FFFFFF",
          position: "top",
          float: "right",
          fontSize: 12,
        },
        xAxis: {
          disabled: false, // 不绘制X轴 默认false
          disableGrid: true, // 不绘制纵向网格
          axisLineColor: "#0746a3", // 坐标轴轴线颜色
          calibration: false, // 坐标轴刻度线
          fontColor: "#FFFFFF", // 字体颜色
          fontSize: 13, // 字体大小
          rotateLabel: false, //【旋转】数据点（刻度点）文字
          rotateAngle: 45, //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
          // labelCount: 7,//数据点文字（刻度点）单屏幕限制显示的数量
          // scrollShow: false, // 是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
        },
        yAxis: {
          disabled: false, //不绘制Y轴
          disableGrid: false, //不绘制横向向网格(即默认绘制网格)
          gridType: "dash", // 横向向网格线型，可选值：'solid'实线,'dash'虚线
          dashLength: 8, //横向网格为虚线时，单段虚线长度
          gridColor: "#0f5681",
          showTitle: true,
          data: [
            // 多Y轴配置
            {
              axisLineColor: "#0746a3", // 坐标轴轴线颜色，默认#CCCCCC
              calibration: false, // 刻度线是否显示
              fontColor: "#FFFFFF", // 数据点（刻度点）字体颜色，默认#666666
              fontSize: 13, // 数据点（刻度点）字体大小
              textAlign: "right", //数据点（刻度点）相对轴线的对齐方式，可选值：'left','right','center'
              title: "单位(人)", // 当前Y轴标题（需要上面showTitle设置为true）
              titleFontSize: 13, // 标题字体大小
              titleOffsetY: -5, // 标题纵向偏移距离，负数为向上偏移，正数向下偏移
              titleOffsetX: 0, // 标题横向偏移距离，负数为向左偏移，正数向右偏移
              titleFontColor: "#FFFFFF", //标题字体颜色，默认#666666
              unit: "", //Y轴刻度值后附加单位
              min: 0, // 当前Y轴起始值（默认数据中的最小值）
            },
          ],
        },
        extra: {
          column: {
            type: "group", //柱状图类型，可选值：'group'分组柱状图,'stack'堆叠柱状图,'meter'温度计式图
            width: 5, //柱状图每个柱子的图形宽度
            activeBgColor: "#000000", //当前点击柱状图的背景颜色
            activeBgOpacity: 0.08, // 当前点击柱状图的背景颜色透明度
            linearType: "none", //渐变类型，可选值："none"关闭渐变,"opacity"透明渐变,"custom"自定义颜色
            seriesGap: 5, //多series每个柱子之间的间距
            categoryGap: 0, //每个category点位（X轴点）柱子组之间的间距
            linearOpacity: 0.5, //透明渐变的透明度（值范围0到1，值越小越透明）
            barBorderCircle: true, // 启用分组柱状图半圆边框
            customColor: ["#FA7D8D", "#EB88E2"],
          },
        },
      },
    };
  },
  props: {
    xValue: {
      type: Array,
      default: () => ["A率", "B率", "C率"],
    },
    yValue1: {
      type: Array,
      default: () => [16000, 16000, 16000],
    },
    yValue2: {
      type: Array,
      default: () => [10000, 17000, 12000],
    },
    yValue3: {
      type: Array,
      default: () => [6000, 13000, 4000],
    },
    yValue4: {
      type: Array,
      default: () => [3000, 7000, 8000],
    },
  },
  watch: {
    yValue4: {
      handler() {
        this.setChartsData();
      },
      immediate: true,
    },
  },
  methods: {
    setChartsData() {
      this.chartData = {
        categories: this.xValue,
        series: [
          {
            name: "name1",
            data: this.yValue1,
            labelShow: false,
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
          },
          {
            name: "name2",
            data: this.yValue2,
            labelShow: false,
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
          },
          {
            name: "name3",
            data: this.yValue3,
            labelShow: false,
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
          },
          {
            name: "name4",
            data: this.yValue4,
            labelShow: false,
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
          },
        ],
      };
    },
  },
};
</script>

实例五：折线图

<template>
  <view style="width: 100%; height: 100%">
    <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#2fece6", "#f7271c", "#fd812b", "#e9fd2b"],
        padding: [2, 25, 10, 10],
        rotate: false, //横屏模式
        animation: true, // 是否动画展示图表
        dataLabel: false, // 是否显示图表区域内数据点上方的数据文案
        dataPointShape: true, //是否显示数据点的图形标识
        dataPointShapeType: "hollow", //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
        legend: {
          show: true,
          fontColor: "#FFFFFF",
          position: "top",
          float: "right",
          fontSize: 12,
        },
        xAxis: {
          disabled: false, // 不绘制X轴 默认false
          disableGrid: true, // 不绘制纵向网格
          axisLineColor: "#0746a3", // 坐标轴轴线颜色
          calibration: false, // 坐标轴刻度线
          fontColor: "#FFFFFF", // 字体颜色
          fontSize: 13, // 字体大小
          rotateLabel: false, //【旋转】数据点（刻度点）文字
          rotateAngle: 45, //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
          labelCount: 7, //数据点文字（刻度点）单屏幕限制显示的数量
          scrollShow: false, // 是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
          boundaryGap: "justify", //折线图、区域图起画点结束点方法，可选值：'center'两端留空,'justify'两端对齐
        },
        yAxis: {
          disabled: false, //不绘制Y轴
          disableGrid: false, //不绘制横向向网格(即默认绘制网格)
          gridType: "dash", // 横向向网格线型，可选值：'solid'实线,'dash'虚线
          dashLength: 8, //横向网格为虚线时，单段虚线长度
          gridColor: "#0f5681",
          showTitle: true,
          data: [
            // 多Y轴配置
            {
              axisLineColor: "#0746a3", // 坐标轴轴线颜色，默认#CCCCCC
              calibration: false, // 刻度线是否显示
              fontColor: "#FFFFFF", // 数据点（刻度点）字体颜色，默认#666666
              fontSize: 13, // 数据点（刻度点）字体大小
              textAlign: "right", //数据点（刻度点）相对轴线的对齐方式，可选值：'left','right','center'
              title: "单位(人)", // 当前Y轴标题（需要上面showTitle设置为true）
              titleFontSize: 13, // 标题字体大小
              titleOffsetY: -5, // 标题纵向偏移距离，负数为向上偏移，正数向下偏移
              titleOffsetX: 0, // 标题横向偏移距离，负数为向左偏移，正数向右偏移
              titleFontColor: "#FFFFFF", //标题字体颜色，默认#666666
              unit: "", //Y轴刻度值后附加单位
              min: 0, // 当前Y轴起始值（默认数据中的最小值）
            },
          ],
        },
        extra: {
          line: {
            type: "curve", // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
            width: 2, // 叠加的折线宽度
            activeType: "solid", // 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
          },
        },
      },
    };
  },
  props: {
    xValue: {
      type: Array,
      default: () => ["08:10", "08:20", "08:30", "08:40", "08:50", "09:10", "09:20", "09:30", "09:40", "09:50", "10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "11:00", "11:10", "11:20", "11:30", "11:40", "11:50", "12:00", "13:00"],
    },
    yValue1: {
      type: Array,
      default: () => [1600, 1600, 1600, 1600, 1600, 1600, 1600, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1600, 1600, 1600],
    },
    yValue2: {
      type: Array,
      default: () => [1300, 1300, 1300, 1300, 1300, 1300, 1300, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1300, 1300, 1300],
    },
    yValue3: {
      type: Array,
      default: () => [1135, 1135, 1135, 1135, 1135, 1135, 1135, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1135, 1135, 1135],
    },
    yValue4: {
      type: Array,
      default: () => [900, 900, 900, 900, 900, 900, 900, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 1115, 900, 900, 900],
    },
  },
  watch: {
    yValue: {
      handler() {
        this.setChartsData();
      },
      immediate: true,
    },
  },
  methods: {
    setChartsData() {
      this.chartData = {
        categories: this.xValue,
        series: [
          {
            name: "监测",
            data: this.yValue1,
            labelShow: false,
            lineType: "solid", // 折线线型，可选值：'solid'为实线,'dash'为虚线，仅针对line,area,mix有效
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
            pointShape: "circle", //数据点标识样式，可选值为diamond◆, circle●, triangle▲, square■, none 无
          },
          {
            name: "预测",
            data: this.yValue2,
            labelShow: false,
            lineType: "solid", // 折线线型，可选值：'solid'为实线,'dash'为虚线，仅针对line,area,mix有效
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
            pointShape: "circle", //数据点标识样式，可选值为diamond◆, circle●, triangle▲, square■, none 无
          },
          {
            name: "最优",
            data: this.yValue3,
            labelShow: false,
            lineType: "solid", // 折线线型，可选值：'solid'为实线,'dash'为虚线，仅针对line,area,mix有效
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
            pointShape: "circle", //数据点标识样式，可选值为diamond◆, circle●, triangle▲, square■, none 无
          },
          {
            name: "设计",
            data: this.yValue4,
            labelShow: false,
            lineType: "solid", // 折线线型，可选值：'solid'为实线,'dash'为虚线，仅针对line,area,mix有效
            textColor: "#FFFFFF", //图形上方标注文字的颜色（datalabel文字颜色），例如#7cb5ec 不传入则使用系统默认配色方案
            pointShape: "circle", //数据点标识样式，可选值为diamond◆, circle●, triangle▲, square■, none 无
          },
        ],
      };
    },
  },
};
</script>