uni-app引用echarts

官网:https://uniapp.dcloud.net.cn/tutorial/renderjs.html#%E7%A4%BA%E4%BE%8B

使用renderjs 引入echarts (不支持小程序【支持app和H5】) 

官网例子:https://ext.dcloud.net.cn/plugin?id=1207 

使用步骤:

0、在static 放入echarts/echarts.min.js 文件(ps:本echarts.min.js 示例只下载了 柱状图,折线图,饼图)

1、在components中建立echarts.vue 代码如下:

代码里script.src = './static/echarts/echarts.min.js'   (更改路径不行的话,还是建议使用此路径) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<template>
    <view>
        <view class="echarts" :prop="option" :change:prop="echarts.update"></view>
    </view>
</template>
  
<script>
    export default {
        name: 'Echarts',
        props: {
            option: {
                type: Object,
                required: true
            }
        }
    }
</script>
  
<script module="echarts" lang="renderjs">
    export default {
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            if (typeof window.echarts === 'object') {
                this.init()
            } else {
                // 动态引入类库
                const script = document.createElement('script')
                // script.src = './static/echarts/echarts.min.js'
                // script.src = './static/echarts/echarts.min.js'
                script.src = './static/echarts/echarts.min.js'
                script.onload = this.init
                document.head.appendChild(script)
            }
        },
        methods: {
            /**
             * 初始化echarts
             */
            init() {
                this.chart = echarts.init(this.$el)
                this.update(this.option)
            },
            /**
             * 监测数据更新
             * @param {Object} option
             */
            update(option) {
                if (this.chart) {
                    // 因App端,回调函数无法从renderjs外传递,故在此自定义设置相关回调函数
                    if (option) {
                        // tooltip
                        if (option.tooltip) {
                            // 判断是否设置tooltip的位置
                            if (option.tooltip.positionStatus) {
                                option.tooltip.position = this.tooltipPosition()
                            }
                            // 判断是否格式化tooltip
                            if (option.tooltip.formatterStatus) {
                                option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
                            }
                        }
                    // 设置新的option
                    this.chart.setOption(option, option.notMerge)
                    }
                     
                }
            },
            /**
             * 设置tooltip的位置,防止超出画布
             */
            tooltipPosition() {
                return (point, params, dom, rect, size) => {
                    //其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小
                    let x = point[0]
                    let y = point[1]
                    let viewWidth = size.viewSize[0]
                    let viewHeight = size.viewSize[1]
                    let boxWidth = size.contentSize[0]
                    let boxHeight = size.contentSize[1]
                    let posX = 0 //x坐标位置
                    let posY = 0 //y坐标位置
                    if (x < boxWidth) { //左边放不开
                        posX = 5
                    } else { //左边放的下
                        posX = x - boxWidth
                    }
                    if (y < boxHeight) { //上边放不开
                        posY = 5
                    } else { //上边放得下
                        posY = y - boxHeight
                    }
                    return [posX, posY]
                }
            },
            /**
             * tooltip格式化
             * @param {Object} unit 数值后的单位
             * @param {Object} formatFloat2 是否保留两位小数
             * @param {Object} formatThousands 是否添加千分位
             */
            tooltipFormatter(unit, formatFloat2, formatThousands) {
                return params => {
                    let result = ''
                    unit = unit ? unit : ''
                    for (let i in params) {
                        if (i == 0) {
                            result += params[i].axisValueLabel
                        }
                        let value = '--'
                        if (params[i].data !== null) {
                            value = params[i].data
                            // 保留两位小数
                            if (formatFloat2) {
                                value = this.formatFloat2(value)
                            }
                            // 添加千分位
                            if (formatThousands) {
                                value = this.formatThousands(value)
                            }
                        }
                        // #ifdef H5
                        result += '\n' + params[i].seriesName + ':' + value + ' ' + unit
                        // #endif
                         
                        // #ifdef APP-PLUS
                        result += '<br/>' + params[i].marker + params[i].seriesName + ':' + value + ' ' + unit
                        // #endif
                    }
                    return result
                }
            },
            /**
             * 保留两位小数
             * @param {Object} value
             */
            formatFloat2(value) {
                let temp = Math.round(parseFloat(value) * 100) / 100
                let xsd = temp.toString().split('.')
                if (xsd.length === 1) {
                    temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
                    return temp
                }
                if (xsd.length > 1) {
                    if (xsd[1].length < 2) {
                        temp = temp.toString() + '0'
                    }
                    return temp
                }
            },
            /**
             * 添加千分位
             * @param {Object} value
             */
            formatThousands(value) {
                if (value === undefined || value === null) {
                    value = ''
                }
                if (!isNaN(value)) {
                    value = value + ''
                }
                let re = /\d{1,3}(?=(\d{3})+$)/g
                let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
                    return s1.replace(re, '$&,') + s2
                })
                return n1
            }
        }
    }
</script>
  
<style lang="scss" scoped>
    .echarts {
        width: 100%;
        height: 100%;
    }
</style>

  2、将组件放入需要用到的vue 界面中 使用如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
    <view class="content">
        <view style="padding:20px">echarts.min.js 只下载了 柱状图 折线图 饼图 </view>
        <echarts :option="option" style="height: 400px;"></echarts>
        <echarts :option="option2" style="height: 400px;"></echarts>
        <echarts :option="option3" style="height: 400px;"></echarts>
 
    </view>
</template>
 
<script>
export default {
    data() {
        return {
            option: {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            },
            option2: {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 0,
                    top: 10,
                    bottom: 20,
                    // data: data.legendData
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        center: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '拒绝服务' },
                            { value: 735, name: '拒绝服务2' },
                            { value: 580, name: '拒绝服务3' },
                            { value: 484, name: '拒绝服务4' },
                            { value: 300, name: '拒绝服务4' }
                        ]
                    }
                ]
            },
            option3: {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        type: 'line'
                    }
                ]
            },
 
        }
    },
    onLoad() {
 
    },
    methods: {
 
    }
}
</script>

  3、效果如下(h5与手机端正常)

      

4、文件目录如下:

 

 ps:官网提供的demo如下图 下载下来是正常的 但是在使用饼状图,折线图的时候  浏览器上是正常显示的 但是手机上显示不了 出现如下错误 ,所以上面例子是调整过 手机上也能正常显示的

 

demo 下载链接 在HBuilder x 中可以运行看效果

https://files.cnblogs.com/files/blogs/702532/renderjs-echarts-demo.zip?t=1682304925&download=true

 

posted @   蓝色精灵jah  阅读(1325)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示