ucharts.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. <template>
  2. <view class="content">
  3. <u-alert title="基本柱状图" center type = "info"></u-alert>
  4. <!--
  5. 极简调用示例,只需指定type及chartData即可。
  6. 图表默认配置请修改js_sdk/u-charts/config-ucharts.js对应图表类型下配置
  7. 注:1、更新前请自行备份config-ucharts.js、config-echarts.js,以免被覆盖
  8. 2、此方式调用组件chartData需自行按图表类型需求的数据格式拼接
  9. 配置参数请用在线生成工具(http://demo.ucharts.cn/)生成
  10. 3、class="charts-box"这个样式,指定了高度,如果你的父元素有固定高度,请修改为height:100%
  11. -->
  12. <view class="charts-box">
  13. <qiun-data-charts type="column" :chartData="chartsDataColumn1" />
  14. </view>
  15. <u-alert title="堆叠柱状图" center type = "info"></u-alert>
  16. <!-- 只需要在:opts中传入与config-ucharts.js中默认配置不同的属性即可覆盖默认配置,既保证了全局图表样式的统一性,也减少了代码量与包体积 -->
  17. <view class="charts-box">
  18. <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :chartData="chartsDataColumn2"/>
  19. </view>
  20. <u-alert title="温度计图表" center type = "info"></u-alert>
  21. <view class="charts-box">
  22. <qiun-data-charts type="column" :opts="{extra:{column:{type:'meter',meterBorde:1,meterFillColor:'#FFFFFF'}}}" :chartData="chartsDataColumn3"/>
  23. </view>
  24. <u-alert title="柱状图滚动条" center type = "info"></u-alert>
  25. <!-- 开启滚动条,需要开启拖动功能,即:ontouch="true" ,微信小程序需要开启canvas2d,否则会很卡,开启2d需要指定canvasId -->
  26. <view class="charts-box">
  27. <qiun-data-charts type="column" canvasId="scrollcolumnid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :ontouch="true" :canvas2d="true" :chartData="chartsDataColumn4"/>
  28. </view>
  29. <u-alert title="圆角+渐变+半透明柱状图" center type = "info"></u-alert>
  30. <view class="charts-box">
  31. <qiun-data-charts type="column" :opts="{color:['#FAC858','#EE6666'],extra:{column:{linearType:'custom',seriesGap:5,linearOpacity:0.5,barBorderCircle:true,customColor:['#FA7D8D','#EB88E2']}}}" :chartData="chartsDataColumn5"/>
  32. </view>
  33. <u-alert title="全圆角柱状图+标记线" center type = "info"></u-alert>
  34. <view class="charts-box">
  35. <qiun-data-charts type="column" :opts="{yAxis:{data:[{min:0}]},enableMarkLine:true,extra:{column:{seriesGap:5,barBorderRadius:[6,6,6,6]},markLine:{data:[{value:21,showLabel:true}]}}}" :chartData="chartsDataColumn6" />
  36. </view>
  37. <u-alert title="柱状图横屏模式" center type = "info"></u-alert>
  38. <view style="width: 100%;height: 500px;">
  39. <qiun-data-charts type="column" :opts="{rotate:true}" :chartData="chartsDataColumn1" />
  40. </view>
  41. <u-alert title="基本条状图" center type = "info"></u-alert>
  42. <view class="charts-box">
  43. <qiun-data-charts type="bar" :opts="{xAxis:{max:40}}" :chartData="chartsDataColumn1"/>
  44. </view>
  45. <u-alert title="圆角条状图+渐变色" center type = "info"></u-alert>
  46. <view class="charts-box">
  47. <qiun-data-charts type="bar" :opts="{xAxis:{max:40},extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="chartsDataColumn1"/>
  48. </view>
  49. <u-alert title="堆叠条状图" center type = "info"></u-alert>
  50. <view class="charts-box">
  51. <qiun-data-charts type="bar" :opts="{xAxis:{max:70},extra:{bar:{type:'stack'}}}" :chartData="chartsDataColumn1"/>
  52. </view>
  53. <u-alert title="圆角山峰图" center type = "info"></u-alert>
  54. <view class="charts-box">
  55. <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'mount',widthRatio:1.5}}}" :chartData="chartsDataMount"/>
  56. </view>
  57. <u-alert title="尖角山峰图" center type = "info"></u-alert>
  58. <view class="charts-box">
  59. <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'sharp',widthRatio:1.5}}}" :chartData="chartsDataMount"/>
  60. </view
  61. <u-alert center type = "info" title="三角山峰图"/>
  62. <view class="charts-box">
  63. <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'triangle',widthRatio:1.5}}}" :chartData="chartsDataMount"/>
  64. </view>
  65. <u-alert center type = "info" title="直角山峰图"/>
  66. <view class="charts-box">
  67. <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'bar',widthRatio:0.8}}}" :chartData="chartsDataMount" />
  68. </view>
  69. <u-alert center type = "info" title="山峰图无边渐变色"/>
  70. <view class="charts-box">
  71. <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'mount',widthRatio:1.5,borderWidth: 0,linearType: 'custom'}}}" :chartData="chartsDataMount" />
  72. </view>
  73. <u-alert center type = "info" title="山峰图有边透明渐变+滚动条"/>
  74. <view class="charts-box">
  75. <qiun-data-charts type="mount" :opts="{enableScroll:true,xAxis:{itemCount:4,scrollShow:true},extra:{mount:{type:'sharp',widthRatio:1.5,borderWidth: 2,linearType: 'opacity',linearOpacity: 0.1}}}" :ontouch="true" :chartData="chartsDataMount"/>
  76. </view>
  77. <u-alert center type = "info" title="山峰图有边渐变+标记线"/>
  78. <view class="charts-box">
  79. <qiun-data-charts type="mount" :opts="{padding:[15,40,0,15],enableMarkLine: true,extra:{mount:{type:'triangle',widthRatio:1,borderWidth: 2,linearType: 'custom'},markLine: {
  80. type: 'solid',
  81. dashLength: 4,
  82. data: [
  83. {
  84. value: 45,
  85. lineColor: '#DE4A42',
  86. showLabel: true,
  87. labelAlign: 'right',
  88. labelOffsetX: 0,
  89. labelOffsetY: 0,
  90. labelText: '均值',
  91. labelFontColor: '#666666',
  92. labelBgColor: '#DFE8FF',
  93. labelBgOpacity: 0.8
  94. }
  95. ]
  96. }}}" :chartData="chartsDataMount" />
  97. </view>
  98. <u-alert center type = "info" title="山峰图圆角渐变色柱状图"/>
  99. <view class="charts-box">
  100. <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'bar',widthRatio:0.3,borderWidth: 0,barBorderRadius: [50,50,50,50],linearType: 'custom'}}}" :chartData="chartsDataMount"/>
  101. </view>
  102. <u-alert center type = "info" title="基本折线图"/>
  103. <view class="charts-box">
  104. <qiun-data-charts type="line" :chartData="chartsDataLine1"/>
  105. </view>
  106. <u-alert center type = "info" title="基本曲线图(自定义图表类型)"/>
  107. <view class="charts-box">
  108. <!-- 这里的type="demotype"演示了自定义图表类型的demo,您可以根据需求自己定义一种额外的图表类型 -->
  109. <qiun-data-charts type="demotype" :opts="{xAxis:{boundaryGap:'justify'}}" :chartData="chartsDataLine2"/>
  110. <!-- 如果不定义"demotype"这个图表类型,可以通过传递opts来覆盖line下的默认配置,如下 -->
  111. <!-- <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :chartData="chartsData.Line2"/> -->
  112. </view>
  113. <u-alert center type = "info" title="基本时序图"/>
  114. <view class="charts-box">
  115. <qiun-data-charts type="line" :opts="{extra:{line:{type:'step'}}}" :chartData="chartsDataLine3"/>
  116. </view>
  117. <u-alert center type = "info" title="折线图滚动条"/>
  118. <!-- 开启滚动条,需要开启拖动功能,即:ontouch="true",微信小程序需要开启canvas2d,否则会很卡,开启2d需要指定canvasId -->
  119. <view class="charts-box">
  120. <qiun-data-charts type="line" canvasId="scrolllineid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :chartData="chartsDataLine4" :ontouch="true" :canvas2d="true"/>
  121. </view>
  122. <u-alert center type = "info" title="折线图+断点续连connectNulls"/>
  123. <view class="charts-box">
  124. <qiun-data-charts type="line" :chartData="chartsDataLine5"/>
  125. </view>
  126. <u-alert center type = "info" title="时间轴(矢量轴)折线图"/>
  127. <!-- 矢量轴图表支持折线图、区域图、散点图、气泡图。需要注意chartData中,如果是矢量轴,则不能带categories -->
  128. <view class="charts-box">
  129. <qiun-data-charts type="tline" :opts="{yAxis:{data:[{min:0,max:80}]}}" :chartData="chartsDataTLine" />
  130. </view>
  131. <u-alert center type = "info" title="基本折线区域图"/>
  132. <view class="charts-box">
  133. <qiun-data-charts type="area" :chartData="chartsDataArea1"/>
  134. </view>
  135. <u-alert center type = "info" title="渐变色时序区域图"/>
  136. <view class="charts-box">
  137. <qiun-data-charts type="area" :opts="{extra:{area:{type:'step',addLine:true,gradient:true}}}" :chartData="chartsDataArea2"/>
  138. </view>
  139. <u-alert center type = "info" title="渐变色曲线区域图"/>
  140. <view class="charts-box">
  141. <qiun-data-charts type="area" :opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="chartsDataArea2"/>
  142. </view>
  143. <u-alert center type = "info" title="时间轴(矢量轴)区域图"/>
  144. <!-- 矢量轴图表支持折线图、区域图、散点图、气泡图。需要注意chartData中,如果是矢量轴,则不能带categories -->
  145. <view class="charts-box">
  146. <qiun-data-charts type="tarea" :opts="{xAxis:{format:'xAxisDemo2'},yAxis:{data:[{min:0,max:80}]}}" :chartData="chartsDataTLine" />
  147. </view>
  148. <u-alert center type = "info" title="散点图"/>
  149. <view class="charts-box">
  150. <qiun-data-charts type="scatter" :chartData="chartsDataScatter" />
  151. </view>
  152. <u-alert center type = "info" title="气泡图"/>
  153. <view class="charts-box">
  154. <qiun-data-charts type="bubble" :chartData="chartsDataBubble" />
  155. </view>
  156. <u-alert center type = "info" title="多坐标系混合图"/>
  157. <view class="charts-box" style="height: 400px;">
  158. <qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},{position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'},{position: 'right',min: 0,max: 200,title: '点',textAlign: 'left'}]}}" :chartData="chartsDataMix1"/>
  159. </view>
  160. <u-alert center type = "info" title="基本饼状图"/>
  161. <view class="charts-box">
  162. <qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
  163. </view>
  164. <u-alert center type = "info" title="环形图+渐变色"/>
  165. <view class="charts-box">
  166. <qiun-data-charts type="ring" :opts="{legend:{position: 'bottom'},extra:{ring:{ringWidth: 60,linearType:'custom',centerColor:'#FF0'}}}" :chartData="chartsDataRing1"/>
  167. </view>
  168. <u-alert center type = "info" title="面积玫瑰图"/>
  169. <view class="charts-box">
  170. <qiun-data-charts type="rose" :opts="{legend:{position: 'bottom'}}" :chartData="chartsDataRose1"/>
  171. </view>
  172. <u-alert center type = "info" title="半径玫瑰图"/>
  173. <view class="charts-box">
  174. <qiun-data-charts type="rose" :opts="{legend:{position: 'bottom'},extra:{rose:{type:'radius'}}}" :chartData="chartsDataRose2"/>
  175. </view>
  176. <u-alert center type = "info" title="圆弧进度条"/>
  177. <!-- 这里的title.name和subtitle.name如果需要联动chartData,请定义一个变量同步传入:opts和:chartData中 -->
  178. <view class="charts-box">
  179. <qiun-data-charts type="arcbar" :opts="{title:{name:'80%',color:'#2fc25b',fontSize:35},subtitle:{name:'正确率',color:'#666666',fontSize:25}}" :chartData="chartsDataArcbar1"/>
  180. </view>
  181. <u-alert center type = "info" title="多重圆弧进度条"/>
  182. <view class="charts-box">
  183. <qiun-data-charts type="arcbar" :opts="{title:{name:'指标',color:'#1890ff',fontSize:35},subtitle:{},extra:{arcbar:{type:'circle',startAngle:1.5}}}" :chartData="chartsDataArcbar2"/>
  184. </view>
  185. <u-alert center type = "info" title="多边形雷达图"/>
  186. <view class="charts-box">
  187. <qiun-data-charts type="radar" :opts="{legend:{position: 'bottom'},extra:{radar:{border:true}}}" :chartData="chartsDataRadar1"/>
  188. </view>
  189. <u-alert center type = "info" title="圆形雷达图"/>
  190. <view class="charts-box">
  191. <qiun-data-charts type="radar" :opts="{legend:{position: 'bottom'},extra:{radar:{gridType:'circle'}}}" :chartData="chartsDataRadar2"/>
  192. </view>
  193. <u-alert center type = "info" title="基本仪表盘"/>
  194. <!-- 这里的title.name和subtitle.name如果需要联动chartData,请定义一个变量同步传入:opts和:chartData中 -->
  195. <view class="charts-box">
  196. <qiun-data-charts type="gauge" :opts="{title:{name: '60Km/H',color: '#2fc25b',fontSize: 25,offsetY:50},subtitle: {name: '实时速度',color: '#666666',fontSize: 15,offsetY:-50}}" :chartData="chartsDataGauge1"/>
  197. </view>
  198. <u-alert center type = "info" title="其他仪表盘"/>
  199. <view class="charts-box">
  200. <qiun-data-charts type="gauge" :opts="{title:{offsetY:0},subtitle:{offsetY:0},extra:{gauge:{type:'progress',width:20,splitLine:{fixRadius:-10,width:15,},}}}" :chartData="chartsDataGauge2"/>
  201. </view>
  202. <u-alert center type = "info" title="词云图"/>
  203. <view class="charts-box">
  204. <qiun-data-charts type="word" :chartData="chartsDataWord1"/>
  205. </view>
  206. <u-alert center type = "info" title="漏斗图+渐变色"/>
  207. <view class="charts-box">
  208. <qiun-data-charts type="funnel" :opts="{extra:{funnel:{linearType:'custom'}}}" :chartData="chartsDataFunnel1"/>
  209. </view>
  210. <u-alert center type = "info" title="倒三角形漏斗图"/>
  211. <view class="charts-box">
  212. <qiun-data-charts type="funnel" :opts="{extra:{funnel:{type:'triangle'}}}" :chartData="chartsDataFunnel1"/>
  213. </view>
  214. <u-alert center type = "info" title="金字塔形漏斗图"/>
  215. <view class="charts-box">
  216. <qiun-data-charts type="funnel" :opts="{extra:{funnel:{type:'pyramid',labelAlign:'left'}}}" :chartData="chartsDataFunnel1"/>
  217. </view>
  218. <u-alert center type = "info" title="K线图+双指缩放"/>
  219. <view class="charts-box" style="height: 400px;">
  220. <qiun-data-charts type="candle" :opts="{extra:{tooltip:{showCategory:true}}}" :ontouch="true" :canvas2d="true" :onzoom="true" canvasId="klineid" :chartData="chartsDataCandle1"/>
  221. </view>
  222. <u-alert center type = "info" title="地图"/>
  223. <view class="charts-box" style="height: 400px;">
  224. <qiun-data-charts type="map" :opts="{extra:{map:{mercator:true}}}" :chartData="chartsDataMap1"/>
  225. </view>
  226. </view>
  227. </template>
  228. <script>
  229. //下面是演示数据,您的项目不需要引用,数据需要您从服务器自行获取
  230. import demodata from './mockdata/demodata.json';
  231. import mapdata from './mockdata/mapdata.json'
  232. export default {
  233. data() {
  234. return {
  235. chartsDataColumn1:{},
  236. chartsDataColumn2:{},
  237. chartsDataColumn3:{},
  238. chartsDataColumn4:{},
  239. chartsDataColumn5:{},
  240. chartsDataColumn6:{},
  241. chartsDataLine1:{},
  242. chartsDataLine2:{},
  243. chartsDataLine3:{},
  244. chartsDataLine4:{},
  245. chartsDataLine5:{},
  246. chartsDataTLine:{},
  247. chartsDataScatter:{},
  248. chartsDataBubble:{},
  249. chartsDataArea1:{},
  250. chartsDataArea2:{},
  251. chartsDataMix1:{},
  252. chartsDataPie1:{},
  253. chartsDataRing1:{},
  254. chartsDataRose1:{},
  255. chartsDataRose2:{},
  256. chartsDataArcbar1:{},
  257. chartsDataArcbar2:{},
  258. chartsDataGauge1:{},
  259. chartsDataGauge2:{},
  260. chartsDataRadar1:{},
  261. chartsDataRadar2:{},
  262. chartsDataWord1:{},
  263. chartsDataFunnel1:{},
  264. chartsDataMap1:{},
  265. chartsDataCandle1:{},
  266. chartsDataMount:{}
  267. };
  268. },
  269. onReady() {
  270. //模拟从服务器获取数据
  271. this.getServerData()
  272. },
  273. methods: {
  274. getServerData() {
  275. setTimeout(() => {
  276. //因部分数据格式一样,这里不同图表引用同一数据源的话,需要深拷贝一下构造不同的对象
  277. //开发者需要自行处理服务器返回的数据,应与标准数据格式一致,注意series的data数值应为数字格式
  278. this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
  279. this.chartsDataColumn2=JSON.parse(JSON.stringify(demodata.Column))
  280. this.chartsDataColumn3=JSON.parse(JSON.stringify(demodata.Column))
  281. this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column))
  282. this.chartsDataColumn5=JSON.parse(JSON.stringify(demodata.Column))
  283. this.chartsDataMount=JSON.parse(JSON.stringify(demodata.Mount))
  284. let tmpColumn6=JSON.parse(JSON.stringify(demodata.Column))
  285. tmpColumn6.series[1].data[2]={value:21,color:'#EE6666'}
  286. //注意,因为组件内监听了chartData,构造chartData的时候,一定要先定义一个临时变量,构造完成后统一赋值给chartData绑定的变量,否则会导致多次渲染图表
  287. this.chartsDataColumn6=tmpColumn6
  288. this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
  289. this.chartsDataLine2=JSON.parse(JSON.stringify(demodata.Line))
  290. this.chartsDataLine3=JSON.parse(JSON.stringify(demodata.Line))
  291. this.chartsDataLine4=JSON.parse(JSON.stringify(demodata.Line))
  292. let tmpLine5=JSON.parse(JSON.stringify(demodata.Line))
  293. for (var i = 0; i < tmpLine5.series.length; i++) {
  294. tmpLine5.series[i].data[2]=null
  295. }
  296. tmpLine5.series[1].connectNulls=true
  297. this.chartsDataLine5=tmpLine5
  298. this.chartsDataTLine=JSON.parse(JSON.stringify(demodata.TLine))
  299. this.chartsDataScatter=JSON.parse(JSON.stringify(demodata.Scatter))
  300. this.chartsDataBubble=JSON.parse(JSON.stringify(demodata.Bubble))
  301. this.chartsDataArea1=JSON.parse(JSON.stringify(demodata.Line))
  302. this.chartsDataArea2=JSON.parse(JSON.stringify(demodata.Line))
  303. this.chartsDataMix1=JSON.parse(JSON.stringify(demodata.Mix))
  304. this.chartsDataPie1=JSON.parse(JSON.stringify(demodata.PieA))
  305. this.chartsDataRing1=JSON.parse(JSON.stringify(demodata.PieA))
  306. this.chartsDataRose1=JSON.parse(JSON.stringify(demodata.PieA))
  307. this.chartsDataRose2=JSON.parse(JSON.stringify(demodata.PieA))
  308. this.chartsDataArcbar1=JSON.parse(JSON.stringify(demodata.Arcbar1))
  309. this.chartsDataArcbar2=JSON.parse(JSON.stringify(demodata.Arcbar2))
  310. this.chartsDataGauge1=JSON.parse(JSON.stringify(demodata.Gauge))
  311. this.chartsDataGauge2=JSON.parse(JSON.stringify(demodata.Gauge))
  312. this.chartsDataRadar1=JSON.parse(JSON.stringify(demodata.Radar))
  313. this.chartsDataRadar2=JSON.parse(JSON.stringify(demodata.Radar))
  314. this.chartsDataWord1=JSON.parse(JSON.stringify(demodata.Word))
  315. this.chartsDataFunnel1=JSON.parse(JSON.stringify(demodata.PieA))
  316. this.chartsDataMap1={series:mapdata.features}
  317. this.chartsDataCandle1=JSON.parse(JSON.stringify(demodata.Candle))
  318. }, 1500);
  319. }
  320. }
  321. };
  322. </script>
  323. <style>
  324. .content {
  325. display: flex;
  326. flex-direction: column;
  327. flex: 1;
  328. }
  329. .charts-box {
  330. width: 100%;
  331. height: 300px;
  332. }
  333. </style>