更新记录

1.0.1（2020-08-24） 下载此版本

纯手写柱状图，解决了charts等造成的不兼容问题。添加了渐变色，圆角等样式，让图标更加漂亮，使用更加方便快捷，

平台兼容性

作者说

有项目需要开发的请联系 *** 微信：jp99ww

本团队人员配备齐全，定会让君满意而归

每周会更新一个图表组件，请关注
开发不易，如果帮助到你的，请赞赏
有问题请留言，作者会积极更新，

使用方法

# 基础用法

<template>
<view class="content">
 <jpCharts v-if="list.length>0" :list="list" :Y="Charts.Y" :X="Charts.X" :keyId="Charts.keyId" :width="Charts.width" :bgColor="Charts.bgColor" :height="Charts.height" :canClick="Charts.canClick" :x_width="Charts.x_width" :items="items" :proportion="Charts.proportion" :checkedColor="Charts.checkedColor" :scrollLeft="100"></jpCharts>
</view>
</template>
<script>
 import jpCharts from '@/components/jp_charts/index.vue';
 export default {
 components: {
 jpCharts
 },
 data() {
 return {
 Charts: { //y轴配置 value在list中的键 showY是否一直显示数据 size字大小 units文字后缀
 Y: {
 value: 'value',
 showY: true,
 size: 20,
 units: '日'
 },
 X: {
 value: 'keyw',
 showX: true,
 size: 20,
 units: ''
 },
 keyId: 'keyw',
 list: [],
 items: {},
 width: 750,
 height: 500,
 x_width: 100,
 proportion: 30, //宽度占比
 showZ: false, //是否显示线条
 checkedColor: '#007aff',
 canClick: true, //不可以点击
 bgColor: '#fff',
 scrollLeft: 0
 },
 list: [{ keyw: '01', value: 100 }, { keyw: '02', value: 120 }, { keyw: '03', value: 110 }, ],
 items: {
 keyw: '03',
 value: 110
 }
 }
 },
 }
</script>

引入方法

<jpCharts v-if="list.length>0" :list="list" :items="items" ></jpCharts>
import jpCharts from '@/components/jp_charts/index.vue';
components: { jpCharts },

方法介绍

事件

参数

Y 配置