ucharts 獲取點擊數據 All In One
shit docs, WTF
切換 demo 圖表類型
為什么，hover 提示不明顯一點呀, 誰TM 知道可以點擊呀，modal 好隱蔽！
在線生成工具
在線生成配置代碼
<view class="charts-box">
<qiun-data-charts
type="column"
:chartData="chartData"
background="none"
:ontap="false"
:ontouch="true"
:onmouse="false"
@complete="complete"
@getIndex="getIndex"
@scrollLeft="scrollLeft"
@scrollRight="scrollRight"
@getTouchStart="getTouchStart"
@getTouchMove="getTouchMove"
@getTouchEnd="getTouchEnd"
/>
</view>
methods: {
// 事件
complete(e){
console.log(e)
},
getIndex(e){
console.log(e)
},
scrollLeft(e){
console.log(e)
},
scrollRight(e){
console.log(e)
},
getTouchStart(e){
console.log(e)
},
getTouchMove(e){
console.log(e)
},
getTouchEnd(e){
console.log(e)
},
},
dermo
<template>
<view class="charts-box">
<qiun-data-charts
ref="components_test_bar"
type="column"
:opts="options"
:chartData="chartsDataColumn1"
:canvas2d="true"
canvasId="components_test_bar"
:ontap="true"
:ontouch="false"
:onmouse="false"
@complete="complete"
@getIndex="getIndex"
@scrollLeft="scrollLeft"
@scrollRight="scrollRight"
@getTouchStart="getTouchStart"
@getTouchMove="getTouchMove"
@getTouchEnd="getTouchEnd"
/>
</view>
</template>
<script>
// import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
//下面是演示數據，您的項目不需要引用，數據需要您從服務器自行獲取
import demodata from '@/mockdata/demodata.json';
export default {
// name: 'test-uCharts',
props: {
// pageScrollTop: {
// type: Number,
// default: 0
// }
},
data() {
return {
chartsDataColumn1: {},
options: {
dataLabel: false,
},
};
},
//新手注意了，組件里沒有onLoad事件！！！
mounted() {
this.getServerData();
// const dom = document.querySelector('');
const ref = this.$refs.components_test_bar;
console.log('ref =', ref);
console.log('ref.canvasId =', ref.canvasId);
},
methods: {
// 事件
complete(e){
console.log('加載完成', e);
},
getIndex(e){
console.log('\ne index =', e);
// -1 代表下面的 legend, 0 ~ n 代表，第幾條數據
console.log('index =', e.currentIndex.index);
console.log('group = ', e.currentIndex.group);
},
scrollLeft(e){
console.log('scrollLeft', e)
},
scrollRight(e){
console.log('scrollRight', e)
},
getTouchStart(e){
// console.log('touch start', e);
},
getTouchMove(e){
// console.log('touch move', e);
},
getTouchEnd(e){
// console.log('touch end', e)
},
getServerData() {
setTimeout(() => {
//因部分數據格式一樣，這里不同圖表引用同一數據源的話，需要深拷貝一下構造不同的對象
//開發者需要自行處理服務器返回的數據，應與標准數據格式一致，注意series的data數值應為數字格式
this.chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Column));
}, 1000);
},
}
};
</script>
<style>
.charts-box {
width: 100%;
height: 300px;
}
</style>
官方源碼 demos
../ucharts/ucharts
<template>
<view class="content">
<qiun-title-bar title="基本柱狀圖"/>
<!--
極簡調用示例，只需指定type及chartData即可。
圖表默認配置請修改js_sdk/u-charts/config-ucharts.js對應圖表類型下配置
注：1、更新前請自行備份config-ucharts.js、config-echarts.js，以免被覆蓋
2、此方式調用組件chartData需自行按圖表類型需求的數據格式拼接
配置參數請用在線生成工具(http://demo.ucharts.cn/)生成
3、class="charts-box"這個樣式，指定了高度，如果你的父元素有固定高度，請修改為height:100%
-->
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartsDataColumn1" />
</view>
<qiun-title-bar title="堆疊柱狀圖"/>
<!-- 只需要在:opts中傳入與config-ucharts.js中默認配置不同的屬性即可覆蓋默認配置，既保證了全局圖表樣式的統一性，也減少了代碼量與包體積 -->
<view class="charts-box">
<qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :chartData="chartsDataColumn2"/>
</view>
<qiun-title-bar title="溫度計圖表"/>
<view class="charts-box">
<qiun-data-charts type="column" :opts="{extra:{column:{type:'meter'}}}" :chartData="chartsDataColumn3"/>
</view>
<qiun-title-bar title="柱狀圖滾動條"/>
<!-- 開啟滾動條，需要開啟拖動功能，即:ontouch="true" ，微信小程序需要開啟canvas2d，否則會很卡，開啟2d需要指定canvasId -->
<view class="charts-box">
<qiun-data-charts type="column" canvasId="scrollcolumnid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :ontouch="true" :canvas2d="true" :chartData="chartsDataColumn4"/>
</view>
<qiun-title-bar title="圓角+漸變+半透明柱狀圖"/>
<view class="charts-box">
<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"/>
</view>
<qiun-title-bar title="全圓角柱狀圖+標記線"/>
<view class="charts-box">
<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" />
</view>
<qiun-title-bar title="柱狀圖橫屏模式"/>
<view style="width: 100%;height: 500px;">
<qiun-data-charts type="column" :opts="{rotate:true}" :chartData="chartsDataColumn1" />
</view>
<qiun-title-bar title="基本條狀圖"/>
<view class="charts-box">
<qiun-data-charts type="bar" :opts="{xAxis:{max:40}}" :chartData="chartsDataColumn1"/>
</view>
<qiun-title-bar title="圓角條狀圖+漸變色"/>
<view class="charts-box">
<qiun-data-charts type="bar" :opts="{xAxis:{max:40},extra:{bar:{linearType:'custom',barBorderCircle:true}}}" :chartData="chartsDataColumn1"/>
</view>
<qiun-title-bar title="堆疊條狀圖"/>
<view class="charts-box">
<qiun-data-charts type="bar" :opts="{xAxis:{max:70},extra:{bar:{type:'stack'}}}" :chartData="chartsDataColumn1"/>
</view>
<qiun-title-bar title="基本折線圖"/>
<view class="charts-box">
<qiun-data-charts type="line" :chartData="chartsDataLine1"/>
</view>
<qiun-title-bar title="基本曲線圖(自定義圖表類型)"/>
<view class="charts-box">
<!-- 這里的type="demotype"演示了自定義圖表類型的demo，您可以根據需求自己定義一種額外的圖表類型 -->
<qiun-data-charts type="demotype" :opts="{xAxis:{boundaryGap:'justify'}}" :chartData="chartsDataLine2"/>
<!-- 如果不定義"demotype"這個圖表類型，可以通過傳遞opts來覆蓋line下的默認配置，如下 -->
<!-- <qiun-data-charts type="line" :opts="{extra:{line:{type:'curve'}}}" :chartData="chartsData.Line2"/> -->
</view>
<qiun-title-bar title="基本時序圖"/>
<view class="charts-box">
<qiun-data-charts type="line" :opts="{extra:{line:{type:'step'}}}" :chartData="chartsDataLine3"/>
</view>
<qiun-title-bar title="折線圖滾動條"/>
<!-- 開啟滾動條，需要開啟拖動功能，即:ontouch="true"，微信小程序需要開啟canvas2d，否則會很卡，開啟2d需要指定canvasId -->
<view class="charts-box">
<qiun-data-charts type="line" canvasId="scrolllineid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :chartData="chartsDataLine4" :ontouch="true" :canvas2d="true"/>
</view>
<qiun-title-bar title="折線圖+斷點續連connectNulls"/>
<view class="charts-box">
<qiun-data-charts type="line" :chartData="chartsDataLine5"/>
</view>
<qiun-title-bar title="時間軸(矢量軸)折線圖"/>
<!-- 矢量軸圖表支持折線圖、區域圖、散點圖、氣泡圖。需要注意chartData中，如果是矢量軸，則不能帶categories -->
<view class="charts-box">
<qiun-data-charts type="tline" :opts="{yAxis:{data:[{min:0,max:80}]}}" :chartData="chartsDataTLine" />
</view>
<qiun-title-bar title="基本折線區域圖"/>
<view class="charts-box">
<qiun-data-charts type="area" :chartData="chartsDataArea1"/>
</view>
<qiun-title-bar title="漸變色時序區域圖"/>
<view class="charts-box">
<qiun-data-charts type="area" :opts="{extra:{area:{type:'step',addLine:true,gradient:true}}}" :chartData="chartsDataArea2"/>
</view>
<qiun-title-bar title="漸變色曲線區域圖"/>
<view class="charts-box">
<qiun-data-charts type="area" :opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}" :chartData="chartsDataArea2"/>
</view>
<qiun-title-bar title="時間軸(矢量軸)區域圖"/>
<!-- 矢量軸圖表支持折線圖、區域圖、散點圖、氣泡圖。需要注意chartData中，如果是矢量軸，則不能帶categories -->
<view class="charts-box">
<qiun-data-charts type="tarea" :opts="{xAxis:{format:'xAxisDemo2'},yAxis:{data:[{min:0,max:80}]}}" :chartData="chartsDataTLine" />
</view>
<qiun-title-bar title="散點圖"/>
<view class="charts-box">
<qiun-data-charts type="scatter" :chartData="chartsDataScatter" />
</view>
<qiun-title-bar title="氣泡圖"/>
<view class="charts-box">
<qiun-data-charts type="bubble" :chartData="chartsDataBubble" />
</view>
<qiun-title-bar title="多坐標系混合圖"/>
<view class="charts-box" style="height: 400px;">
<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"/>
</view>
<qiun-title-bar title="基本餅狀圖"/>
<view class="charts-box">
<qiun-data-charts type="pie" :chartData="chartsDataPie1"/>
</view>
<qiun-title-bar title="環形圖+漸變色"/>
<view class="charts-box">
<qiun-data-charts type="ring" :opts="{legend:{position: 'bottom'},extra:{ring:{ringWidth: 60,linearType:'custom',centerColor:'#FF0'}}}" :chartData="chartsDataRing1"/>
</view>
<qiun-title-bar title="面積玫瑰圖"/>
<view class="charts-box">
<qiun-data-charts type="rose" :opts="{legend:{position: 'bottom'}}" :chartData="chartsDataRose1"/>
</view>
<qiun-title-bar title="半徑玫瑰圖"/>
<view class="charts-box">
<qiun-data-charts type="rose" :opts="{legend:{position: 'bottom'},extra:{rose:{type:'radius'}}}" :chartData="chartsDataRose2"/>
</view>
<qiun-title-bar title="圓弧進度條"/>
<!-- 這里的title.name和subtitle.name如果需要聯動chartData，請定義一個變量同步傳入:opts和:chartData中 -->
<view class="charts-box">
<qiun-data-charts type="arcbar" :opts="{title:{name:'80%',color:'#2fc25b',fontSize:35},subtitle:{name:'正確率',color:'#666666',fontSize:25}}" :chartData="chartsDataArcbar1"/>
</view>
<qiun-title-bar title="多重圓弧進度條"/>
<view class="charts-box">
<qiun-data-charts type="arcbar" :opts="{title:{name:'指標',color:'#1890ff',fontSize:35},subtitle:{},extra:{arcbar:{type:'circle',startAngle:1.5}}}" :chartData="chartsDataArcbar2"/>
</view>
<qiun-title-bar title="多邊形雷達圖"/>
<view class="charts-box">
<qiun-data-charts type="radar" :opts="{legend:{position: 'bottom'},extra:{radar:{border:true}}}" :chartData="chartsDataRadar1"/>
</view>
<qiun-title-bar title="圓形雷達圖"/>
<view class="charts-box">
<qiun-data-charts type="radar" :opts="{legend:{position: 'bottom'},extra:{radar:{gridType:'circle'}}}" :chartData="chartsDataRadar2"/>
</view>
<qiun-title-bar title="基本儀表盤"/>
<!-- 這里的title.name和subtitle.name如果需要聯動chartData，請定義一個變量同步傳入:opts和:chartData中 -->
<view class="charts-box">
<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"/>
</view>
<qiun-title-bar title="其他儀表盤"/>
<view class="charts-box">
<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"/>
</view>
<qiun-title-bar title="詞雲圖"/>
<view class="charts-box">
<qiun-data-charts type="word" :chartData="chartsDataWord1"/>
</view>
<qiun-title-bar title="漏斗圖+漸變色"/>
<view class="charts-box">
<qiun-data-charts type="funnel" :opts="{extra:{funnel:{linearType:'custom'}}}" :chartData="chartsDataFunnel1"/>
</view>
<qiun-title-bar title="倒三角形漏斗圖"/>
<view class="charts-box">
<qiun-data-charts type="funnel" :opts="{extra:{funnel:{type:'triangle'}}}" :chartData="chartsDataFunnel1"/>
</view>
<qiun-title-bar title="金字塔形漏斗圖"/>
<view class="charts-box">
<qiun-data-charts type="funnel" :opts="{extra:{funnel:{type:'pyramid',labelAlign:'left'}}}" :chartData="chartsDataFunnel1"/>
</view>
<qiun-title-bar title="K線圖"/>
<view class="charts-box" style="height: 400px;">
<qiun-data-charts type="candle" :opts="{extra:{tooltip:{showCategory:true}}}" :ontouch="true" :canvas2d="true" canvasId="klineid" :chartData="chartsDataCandle1"/>
</view>
<qiun-title-bar title="地圖"/>
<view class="charts-box" style="height: 400px;">
<qiun-data-charts type="map" :opts="{extra:{map:{mercator:true}}}" :chartData="chartsDataMap1"/>
</view>
</view>
</template>
<script>
//下面是演示數據，您的項目不需要引用，數據需要您從服務器自行獲取
import demodata from '@/mockdata/demodata.json';
import mapdata from '@/mockdata/mapdata.json'
export default {
data() {
return {
chartsDataColumn1:{},
chartsDataColumn2:{},
chartsDataColumn3:{},
chartsDataColumn4:{},
chartsDataColumn5:{},
chartsDataColumn6:{},
chartsDataLine1:{},
chartsDataLine2:{},
chartsDataLine3:{},
chartsDataLine4:{},
chartsDataLine5:{},
chartsDataTLine:{},
chartsDataScatter:{},
chartsDataBubble:{},
chartsDataArea1:{},
chartsDataArea2:{},
chartsDataMix1:{},
chartsDataPie1:{},
chartsDataRing1:{},
chartsDataRose1:{},
chartsDataRose2:{},
chartsDataArcbar1:{},
chartsDataArcbar2:{},
chartsDataGauge1:{},
chartsDataGauge2:{},
chartsDataRadar1:{},
chartsDataRadar2:{},
chartsDataWord1:{},
chartsDataFunnel1:{},
chartsDataMap1:{},
chartsDataCandle1:{},
};
},
onReady() {
//模擬從服務器獲取數據
this.getServerData()
},
methods: {
getServerData() {
setTimeout(() => {
//因部分數據格式一樣，這里不同圖表引用同一數據源的話，需要深拷貝一下構造不同的對象
//開發者需要自行處理服務器返回的數據，應與標准數據格式一致，注意series的data數值應為數字格式
this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
this.chartsDataColumn2=JSON.parse(JSON.stringify(demodata.Column))
this.chartsDataColumn3=JSON.parse(JSON.stringify(demodata.Column))
this.chartsDataColumn4=JSON.parse(JSON.stringify(demodata.Column))
this.chartsDataColumn5=JSON.parse(JSON.stringify(demodata.Column))
let tmpColumn6=JSON.parse(JSON.stringify(demodata.Column))
tmpColumn6.series[1].data[2]={value:21,color:'#EE6666'}
//注意，因為組件內監聽了chartData，構造chartData的時候，一定要先定義一個臨時變量，構造完成后統一賦值給chartData綁定的變量，否則會導致多次渲染圖表
this.chartsDataColumn6=tmpColumn6
this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
this.chartsDataLine2=JSON.parse(JSON.stringify(demodata.Line))
this.chartsDataLine3=JSON.parse(JSON.stringify(demodata.Line))
this.chartsDataLine4=JSON.parse(JSON.stringify(demodata.Line))
let tmpLine5=JSON.parse(JSON.stringify(demodata.Line))
for (var i = 0; i < tmpLine5.series.length; i++) {
tmpLine5.series[i].data[2]=null
}
tmpLine5.series[1].connectNulls=true
this.chartsDataLine5=tmpLine5
this.chartsDataTLine=JSON.parse(JSON.stringify(demodata.TLine))
this.chartsDataScatter=JSON.parse(JSON.stringify(demodata.Scatter))
this.chartsDataBubble=JSON.parse(JSON.stringify(demodata.Bubble))
this.chartsDataArea1=JSON.parse(JSON.stringify(demodata.Line))
this.chartsDataArea2=JSON.parse(JSON.stringify(demodata.Line))
this.chartsDataMix1=JSON.parse(JSON.stringify(demodata.Mix))
this.chartsDataPie1=JSON.parse(JSON.stringify(demodata.PieA))
this.chartsDataRing1=JSON.parse(JSON.stringify(demodata.PieA))
this.chartsDataRose1=JSON.parse(JSON.stringify(demodata.PieA))
this.chartsDataRose2=JSON.parse(JSON.stringify(demodata.PieA))
this.chartsDataArcbar1=JSON.parse(JSON.stringify(demodata.Arcbar1))
this.chartsDataArcbar2=JSON.parse(JSON.stringify(demodata.Arcbar2))
this.chartsDataGauge1=JSON.parse(JSON.stringify(demodata.Gauge))
this.chartsDataGauge2=JSON.parse(JSON.stringify(demodata.Gauge))
this.chartsDataRadar1=JSON.parse(JSON.stringify(demodata.Radar))
this.chartsDataRadar2=JSON.parse(JSON.stringify(demodata.Radar))
this.chartsDataWord1=JSON.parse(JSON.stringify(demodata.Word))
this.chartsDataFunnel1=JSON.parse(JSON.stringify(demodata.PieA))
this.chartsDataMap1={series:mapdata.features}
this.chartsDataCandle1=JSON.parse(JSON.stringify(demodata.Candle))
}, 1500);
}
}
};
</script>
<style>
.content {
display: flex;
flex-direction: column;
flex: 1;
}
.charts-box {
width: 100%;
height: 300px;
}
</style>
refs
https://blog.csdn.net/qq_40280730/article/details/116061381
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 發布文章使用：只允許注冊用戶才可以訪問！
原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！