ucharts 设置百分比 formatter All In One

ucharts 设置百分比 formatter All In One

shit uni-app & shit ucharts

https://demo.ucharts.cn/#/

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/blob/9ee29ffeac04d034e0c6c276295e7c098918c978/example/uni-app/pages/ucharts-demo/index.vue#L407

元

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

http://doc.ucharts.cn/1073940

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---