ucharts 折线 点_ucharts图表引入的两种方式
import uCharts from '../js_sdk/u-charts/u-charts/u-charts.js'; //可以優化放全局 uCharts ==>使用全局
const lineCharts = {},
optionAs = {};
export default {
name: 'LineChart',
props: {
dataAs: {
//數據
type: Object,
default: () => ({})
},
basicAs: {
通用基礎項設置
type: Object,
default: () => ({})
},
xAxisAs: {
//xAxis YAxis等軸線基礎設置(圓環餅圖無軸線無需設置)
type: Object,
default: () => ({})
},
yAxisAs: {
//xAxis YAxis等軸線基礎設置(圓環餅圖無軸線無需設置)
type: Object,
default: () => ({})
},
legendAs: {
//圖例設置
type: Object,
default: () => ({})
},
extraAs: {
//詳情請看 http://doc.ucharts.cn/1172130
type: Object,
default: () => ({})
},
width: {
//圖標寬度
type: Number,
default: 750
},
height: {
//圖標高度
type: Number,
default: 500
},
labelKey: {
type: String,
default: 'categories'
},
valueKey: {
type: String,
default: 'series'
},
canvasId: {
type: String,
default: `line_canvas_${Math.ceil(Math.random(5) * 10000)}`
}
},
data() {
return {};
},
computed: {
cWidth() {
return uni.upx2px(this.width);
},
cHeight() {
return uni.upx2px(this.height);
}
},
mounted() {
this.initData();
},
watch:{
dataAs(){
this.dataAs = this.dataAs
console.log(this.dataAs)
this.initData();
},
},
methods: {
/*父組件調用*/
lineStatistical:function(){
console.log(this.dataAs)
// this.initData();
},
initData:function(){
let defaultOption = {
//通用基礎項設置 basicAs
$this: this, //this實例組件內使用圖表，必須傳入this實例
canvasId: this.canvasId, //頁面組件canvas-id，支付寶中為id
type: 'line', //圖表類型，可選值為pie、line、column、area、ring、radar、arcbar、gauge、candle、bar、mix、rose、word
animation: true, //是否動畫展示
dataLabel: false, //是否在圖表中顯示數據標簽內容值
dataPointShape: true,
duration: 1000, //動畫展示時長單位毫秒
fontSize: 12, //全局默認字體大小(可選，單位為px，默認13px)高分屏不必乘像素比，自動根據pixelRatio計算
background: '#ffffff', //canvas背景顏色(如果頁面背景顏色不是白色請設置為頁面的背景顏色，默認#ffffff)無作用
pixelRatio: 1, //像素比，默認為1，僅支付寶小程序需要大于1，其他平臺必須為1
width: this.cWidth, //canvas寬度，單位為px，支付寶高分屏需要乘像素比(pixelRatio)
height: this.cHeight, //canvas高度，單位為px，支付寶高分屏需要乘像素比
//數據列表配置項 dataAS
categories: this.dataAs[this.labelKey], //數據類別(餅圖、圓環圖不需要)
series: this.dataAs[this.valueKey], //數據列表
//坐標軸配置項 axisAs
xAxis: {
type:'grid',
gridColor:'#CCCCCC',
gridType:'dash',
dashLength:8,
rotateLabel:'true',
fontSize:2,
fontColor:'#FFFFFF',
},
yAxis: {
//如果是多坐標系則傳數組型對象[{disabled:true},{disabled:false}]
disabled: false, //不繪制Y軸
position: 'left', //Y軸位置，可選值左側left右側right(未起效果)
format: val => {
let defaultSetting = { type: 'number', fixed: 0, name: '人' };
let { type, fixed, name } = this.yAxisAs && this.yAxisAs.formatter ? Object.assign(defaultSetting, this.yAxisAs.formatter) : defaultSetting;
if (type == 'number') {
return val.toFixed(fixed) + name;
} else if (type == 'percent') {
let newName = name || '%';
return (val * 100).toFixed(fixed) + newName;
} else {
return val.toFixed(0) + '人';
}
}
// title:'Y軸標題',//Y軸標題
// titleFontSize:basic.fontSize titleFontColor==>#666666 fontColor==>666666 Y軸數據點顏色 fontSizeY軸數據標簽字體大小 等詳見http://doc.ucharts.cn/1172128
},
//圖列配置 legendAs
legend: {
show: true, //是否顯示各類別的圖例標識
},
//擴展配置 extraAs 詳情請看 http://doc.ucharts.cn/1172130
extra: {
line: {
type: 'straight'
}
}
};
optionAs[this.canvasId] = Object.assign(defaultOption, this.basicAs, this.xAxisAS, this.yAxisAS, this.legendAs, this.extraAs);
lineCharts[this.canvasId] = new uCharts(optionAs[this.canvasId]);
},
touchstart(e) {
let that = this;
lineCharts[this.canvasId].touchLegend(e, { animation: false });
lineCharts[this.canvasId].scrollStart(e);
lineCharts[this.canvasId].showToolTip(e, {
//修改點擊事彈出文字
format: function(item, category){
let defaultSetting = { type: 'number', fixed: 0, name: '' };
let newName;
let { type, fixed, name } = that.yAxisAs && that.yAxisAs.formatter ? Object.assign(defaultSetting, that.yAxisAs.formatter) : defaultSetting;
if (typeof item.data === 'object') {
if (type == 'number') {
return `${category} ${item.name}:${item.data.value.toFixed(fixed)}${name}`;
} else if (type == 'percent') {
newName = name || '%';
return `${category} ${item.name}:${(item.data.value * 100).toFixed(fixed)}${newName}`;
} else {
return `${category} ${item.name}:${item.data.value}`;
}
} else {
if (type == 'number') {
return `${category} ${item.name}:${item.data.toFixed(fixed)}${name}`;
} else if (type == 'percent') {
newName = name || '%';
return `${category} ${item.name}:${(item.data * 100).toFixed(fixed)}${newName}`;
} else {
return `${category} ${item.name}:${item.data}`;
}
}
}
});
},
touchmove(e) {
lineCharts[this.canvasId].scroll(e);
},
touchend(e) {
lineCharts[this.canvasId].scrollEnd(e);
},
intShop(){
uni.navigateTo({url: '/pages/intShopDetail/intShopDetail'});
},
}
};
總結
以上是生活随笔為你收集整理的ucharts 折线 点_ucharts图表引入的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux中断不能进行任务调度,关中断是
- 下一篇： 开机未发现nvidia控制面板_Wind