圖表組件uCharts, 小程序上開發(fā)者們?nèi)绻袌D表的需求可以嘗試使用
首先下載ucharts文件
https://gitee.com/uCharts/uCharts
下載下來看到有這些文件，小伙伴們可以先去示例項(xiàng)目里面看
H5端
引入u-charts.js文件，主要構(gòu)建就是new uCharts和配置context，其他的就跟其他charts配置一樣
可以看例子寫的，也可以自己試驗(yàn)一波
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aaa {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<canvas id="aaa"></canvas>
</body>
</html>
<script src="../statics/js/jquery.min.js"></script> // 自行替換
<script src="../statics/js/assets/js/u-charts.js"></script> // 自行替換
<script>
var option = {
animation: true,
background: "#FFFFFF",
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
extra: {
column: {
type: "group",
width: 30,
activeBgColor: "#000000",
activeBgOpacity: 0.08
}
},
legend: {},
padding: [15, 15, 0, 5],
series: [
{
name: "目標(biāo)值",
data: [35, 36, 31, 33, 13, 34]
},
{
name: "完成量",
data: [18, 27, 21, 24, 6, 28]
}
],
type: "column",
xAxis: {
disableGrid: true
},
yAxis: {
data: [
{
min: 0
}
]
}
}
setTimeout(() => {
let uChartsInstance = {}
const canvas = document.getElementById('aaa');
const ctx = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
option.height = canvas.height
option.width = canvas.width
option.context = ctx; // 找到目標(biāo)元素
uChartsInstance.aaa = new uCharts(option) // 元素包裹著方便找到模塊，方便注冊(cè)事件
canvas.onclick = function (e) {
uChartsInstance.aaa.touchLegend(getH5Offset(e));
uChartsInstance.aaa.showToolTip(getH5Offset(e));
};
canvas.onmousemove = function (e) {
uChartsInstance.aaa.showToolTip(getH5Offset(e));
};
console.log(uChartsInstance)
}, 1000);
</script>
微信小程序( uniapp )
方法寫入兩種方式
第一種方式 ucharts下載下來的文件，只引入js文件
在項(xiàng)目中引入
第二種方式 直接在插件市場(chǎng)里導(dǎo)入到項(xiàng)目
就可以看到有一個(gè)完整的模塊插件
兩種方法的區(qū)別在于，只引入js的 需要自己配置參數(shù)，直接導(dǎo)入的只需要獲取數(shù)據(jù)即可
https://demo.ucharts.cn/#/
ucharts提供了一個(gè)可以實(shí)時(shí)編譯的平臺(tái)，可以在線調(diào)整完之后在替換項(xiàng)目?jī)?nèi)容
以下具體實(shí)現(xiàn)
第一個(gè)只引入js的方法
<template>
<view class="qiun-columns">
<view class="qiun-charts" >
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
</view>
</view>
</template>
<script>
// 引入uCharts 方法組件。
import uCharts from '@/components/u-charts/u-charts.js';
// 定義全局變量
var _self;
var canvaLineA=null;
export default {
data() {
return {
cWidth:'',
cHeight:'',
pixelRatio:1,
}
},
// 頁(yè)面加載執(zhí)行的函數(shù)
onLoad() {
_self = this;
// uni.upx2px(750) 這是uni-app自帶的自適應(yīng)，以750的尺寸為基準(zhǔn)。動(dòng)態(tài)變化
this.cWidth=uni.upx2px(750);
this.cHeight=uni.upx2px(500);
this.getServerData();
},
methods: {
// 獲取數(shù)據(jù)，發(fā)請(qǐng)求 （我這里寫死）
getServerData(){
setTimeout(() => {
this.chartData = {
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
series: [{
name: "成交量",
data: [35, 32, 36, 34, 38, 30]
}]
}
_self.showLineA("canvasLineA", this.chartData);
}, 800)
},
// 展示圖標(biāo)的函數(shù) 接收參數(shù)，一個(gè)塊的id,一個(gè)數(shù)據(jù)
showLineA(canvasId,chartData){
canvaLineA=new uCharts({
$this:_self,
canvasId: canvasId,
// 圖標(biāo)類型
type: 'line',
fontSize:11,
legend:{show:true},
dataLabel:false,
dataPointShape:true,
background:'#FFFFFF',
pixelRatio:_self.pixelRatio,
categories: chartData.categories,
series: chartData.series,
animation: true,
context:uni.createCanvasContext(canvasId, _self), // 這里很重要
// x軸顯示的內(nèi)容
xAxis: {
type:'grid',
gridColor:'#CCCCCC',
gridType:'dash',
dashLength:8
},
// y軸顯示的內(nèi)容
yAxis: {
gridType:'dash',
gridColor:'#CCCCCC',
dashLength:8,
splitNumber:5,
min:10,
max:180,
format:(val)=>{return val.toFixed(0)+'元'}
},
width: _self.cWidth*_self.pixelRatio,
height: _self.cHeight*_self.pixelRatio,
extra: {
line:{
type: 'straight'
}
}
});
},
// 點(diǎn)擊圖表顯示的內(nèi)容
touchLineA(e) {
// 使用聲明的變量canvaLineA
canvaLineA.showToolTip(e, {
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
}
}
}
</script>
<style scoped>
/*樣式的width和height一定要與定義的cWidth和cHeight相對(duì)應(yīng)*/
.qiun-charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
.charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
</style>
另一種引入了整個(gè)插件的方式文章來源：http://www.zghlxwxcb.cn/news/detail-445097.html
<template>
<view>
<view class="charts-box">
<qiun-data-charts
type="column"
:chartData="chartData"
background="none"
/>
</view>
</view>
</template>
<script>
export default{
data(){
return{
// chartData:{
// categories:[],
// series:[],
// },
chartData : {
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
series: [{
"name": "目標(biāo)值",
"data": [35, 36, 31, 33, 13, 34]
}, {
"name": "完成量",
"data": [18, 27, 21, 24, 6, 28]
}]
}
}
}
}
</script>
<style>
/* 請(qǐng)根據(jù)需求修改圖表容器尺寸，如果父容器沒有高度圖表則會(huì)顯示異常 */
.charts-box{
width: 100%;
height:300px;
}
</style>
獲取到數(shù)據(jù)即可實(shí)現(xiàn)，如果需要更改樣式，可以去在線編譯處調(diào)整好在替換掉對(duì)應(yīng)的類型就好，也可以自定類型的名字
實(shí)現(xiàn)圖
文章來源地址http://www.zghlxwxcb.cn/news/detail-445097.html
到了這里，關(guān)于uCharts基本使用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
