ucharts 設置百分比 formatter All In One
shit uni-app & shit ucharts
format
demos
https://github.com/16cheng/uCharts/blob/master/example/uni-app/components/u-charts/u-charts.js#L1079
yAxis & format
yAxis: {
//disabled:true
gridType:'dash',
splitNumber:8,
min:10,
max:180,
format: (val)=>{return val.toFixed(0)+'元'}//如不寫此方法，Y軸刻度默認保留兩位小數
},
元
https://github.com/16cheng/uCharts/tree/master/example/uni-app
solution ✅
demos
/qiun-data-charts_2.3.2-20210627_example/uni_modules/qiun-data-charts/readme.md
/qiun-data-charts_2.3.2-20210627_example/pages/format-u/format-u.vue
💩✅
注意：因各小程序及 app端通過組件均不能傳遞 function 類型參數，
組件內所有formatter方法，
均需使用 format 屬性指定 `config-ucharts.js` 里事先定義好的 formatter 的 key值，
組件會自動匹配與其對應的 function
<template>
<view class="content">
<qiun-title-bar title="餅狀圖format"/>
<view class="charts-box">
<!--
💩✅
注意：因各小程序及 app端通過組件均不能傳遞 function 類型參數，
組件內所有formatter方法，
均需使用 format 屬性指定 `config-ucharts.js` 里事先定義好的 formatter 的 key值，
組件會自動匹配與其對應的 function
-->
<!--
餅圖的format 需要掛到chartData中的 series[i].format 上，
例如 pieFormatDemo.series[i].format="pieDemo"。
當使用localdata數據渲染圖表時，因series是組件自動拼接的，暫時不支持使用 format
-->
<qiun-data-charts
type="pie"
:chartData="chartsDataPie1"
/>
</view>
<qiun-title-bar title="Y軸format方法1(保留小數點及添加單位)"/>
<view class="charts-box">
<qiun-data-charts
type="area"
:opts="{
yAxis:{
data:[
{
tofix:3,
unit:'萬元',
// 什么鬼呀， 那 TM 有 format/formatter ？？？
min:0,
max:200,
},
],
},
}"
:chartData="chartsDataLine1"
/>
</view>
<qiun-title-bar title="Y軸format方法2(自定義)"/>
<view class="charts-box">
<qiun-data-charts
type="area"
:opts="{
yAxis:{
data:[
{
format: 'yAxisDemo1',
// ✅ 必須要使用 format 屬性指定 `config-ucharts.js` 里事先定義好的 formatter 的 key值，
},
],
},
}"
:chartData="chartsDataLine1"
/>
</view>
<qiun-title-bar title="X軸format方法"/>
<view class="charts-box">
<qiun-data-charts
type="area"
:opts="{
xAxis:{
format: 'xAxisDemo1',
},
}"
:chartData="chartsDataLine1"
/>
</view>
<qiun-title-bar title="series數據點format"/>
<view class="charts-box">
<!--
series的format需要在chartData.series中指定，
注意，因為組件監聽了chartData，只要有數據變化，就會觸發更新，
不要用循環chartData綁定的變量，需要一次性整體賦值給chartData！！！
-->
<qiun-data-charts
type="line"
:chartData="chartsDataColumn2"
/>
</view>
<qiun-title-bar title="臨時增加的tooltip提示窗format" />
<view class="charts-box">
<!--
此方法展示在引用的 config-ucharts.js 中動態添加 tooltip的formatter（APP不能實現）
-->
<qiun-data-charts
type="column"
:chartData="chartsDataLine1"
:tooltipFormat="tooltipFormatTemp"
/>
</view>
</view>
</template>
<script>
//下面是演示數據，您的項目不需要引用，數據需要您從服務器自行獲取
import demodata from '@/mockdata/demodata.json';
/*
下面是 uCharts 的配置文件及 qiun-data-charts 組件的公用中轉參數，
可以從本配置文件中獲取 uCharts實例、opts配置、format配置
（APP端因采用 renderjs 無法從此配置文件獲取 uCharts 實例）
並不是所有的頁面都需要引用這個文件引入這個,
configjs 是為了獲取組件的 uCharts實例，從而操作 uCharts的一些方法，
例如手動顯示 tooltip 及一些其他 uCharts包含的方法及事件。
再說一遍，只能在H5內使用，APP不行，APP不行，APP不行
*/
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
export default {
data() {
return {
chartsDataLine1: {},
chartsDataColumn2: {},
chartsDataPie1:{},
tooltipFormatTemp:"tooltipTemp1",
};
},
onLoad() {
//tooltipFormat臨時自定義的示例（APP端不能這么做，只能在config-ucharts.js內預先定義），item, category, index, opts詳細解釋看文檔https://demo.ucharts.cn的幫助頁
uCharts.formatter[this.tooltipFormatTemp] = function(item, category, index, opts) {
//只有第一組數據和其他組別不一樣，想要其他的請自由發揮
if (index === 0) {
return '第一組數據' + item.data + '年';
} else {
return '2016年以后的' + item.data + '天';
}
};
//模擬從服務器獲取數據
this.getServerData()
},
methods: {
getServerData() {
setTimeout(() => {
//因部分數據格式一樣，這里不同圖表引用同一數據源的話，需要深拷貝一下構造不同的對象
//開發者需要自行處理服務器返回的數據，應與標准數據格式一致，注意series的data數值應為數字格式
this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
//數據點格式化示例
//使用format屬性指定config-ucharts.js里事先定義好的formatter的key值，組件會自動匹配與其對應的function
let columnFormatDemo=JSON.parse(JSON.stringify(demodata.Column))
for (var i = 0; i < columnFormatDemo.series.length; i++) {
columnFormatDemo.series[i].format="seriesDemo1"
}
this.chartsDataColumn2=columnFormatDemo
//餅圖格式化示例
//使用format屬性指定config-ucharts.js里事先定義好的formatter的key值，組件會自動匹配與其對應的function
let pieFormatDemo=JSON.parse(JSON.stringify(demodata.PieA))
for (var i = 0; i < pieFormatDemo.series.length; i++) {
pieFormatDemo.series[i].format="pieDemo"
}
this.chartsDataPie1=pieFormatDemo
}, 1500);
},
},
};
</script>
<style>
.content {
display: flex;
flex-direction: column;
flex: 1;
}
.charts-box {
width: 100%;
height: 300px;
}
</style>
Echarts
https://echarts.apache.org/examples/zh/index.html#chart-type-bar
https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis
var colors = ['#5470C6', '#91CC75', '#EE6666'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['蒸發量', '降水量', '平均溫度']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '蒸發量',
min: 0,
max: 250,
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '降水量',
min: 0,
max: 250,
position: 'right',
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '溫度',
min: 0,
max: 25,
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸發量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
yAxisIndex: 1,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均溫度',
type: 'line',
yAxisIndex: 2,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 發布文章使用：只允許注冊用戶才可以訪問！
原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！