更新记录

1.0.1(2020-08-24)

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


平台兼容性

作者说

有项目需要开发的请联系 QQ:371524845 微信:jp99ww
本团队人员配备齐全,定会让君满意而归

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

使用方法

# 基础用法

  1. <template>
  2. <view class="content">
  3. <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>
  4. </view>
  5. </template>
  6. <script>
  7. import jpCharts from '@/components/jp_charts/index.vue';
  8. export default {
  9. components: {
  10. jpCharts
  11. },
  12. data() {
  13. return {
  14. Charts: { //y轴配置 value在list中的键 showY是否一直显示数据 size字大小 units文字后缀
  15. Y: {
  16. value: 'value',
  17. showY: true,
  18. size: 20,
  19. units: '日'
  20. },
  21. X: {
  22. value: 'keyw',
  23. showX: true,
  24. size: 20,
  25. units: ''
  26. },
  27. keyId: 'keyw',
  28. list: [],
  29. items: {},
  30. width: 750,
  31. height: 500,
  32. x_width: 100,
  33. proportion: 30, //宽度占比
  34. showZ: false, //是否显示线条
  35. checkedColor: '#007aff',
  36. canClick: true, //不可以点击
  37. bgColor: '#fff',
  38. scrollLeft: 0
  39. },
  40. list: [{ keyw: '01', value: 100 }, { keyw: '02', value: 120 }, { keyw: '03', value: 110 }, ],
  41. items: {
  42. keyw: '03',
  43. value: 110
  44. }
  45. }
  46. },
  47. }
  48. </script>

引入方法

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

方法介绍

事件
事件名 返回参数 说明
@checked item 点击事件,返回当前点击图形数据
@scroll e 左右滑动返回滑动距离
参数
参数 类型 默认值 说明
list Array 数据
width Number 750
height Number 500
Y Object y轴配置 value在list中的键 showY是否一直显示数据 size字大小 units文字后缀
X Object X轴配置 value在list中的键 showX是否一直显示数据 size字大小 units文字后缀
x_width Number 100 柱状图单条宽
proportion Array 20 柱状图行所占单条宽的比例 (0-100)
showZ Boolean false 是否显示x轴上的线条
keyId String id 数据id键
canClick Boolean true 是否可以点击
bgColor String #fff 柱状图未选中头部颜色
btColor String #eee 柱状图渐变底部颜色颜色
checkedColor String #AC1E34 柱状图选中数据中头部颜色
btcheckedColor String #eee 柱状图选中数据底部颜色
radius Boolean true 柱状图是否圆角
Y 配置
参数 类型 默认值 说明
value Array
Y String 数据键名
showY Boolean false 是否一直显示数据
size Number 22 字大小
units String 文字后缀

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问