uniapp小程序中引入Echarts

uni-app微信小程序引用echarts，与pc端不同，如果直接下载echarts包，会导致小程序打包过大。直接上干货！！！

步骤一：下载插件

下载插件

1. 将插件导入到项目中，项目中会生成一个js_sdk文件夹；
2. 将文件夹下的uni-ec-canvas移动至components文件夹下
   

步骤二：引用

根据自己的文件引入

import uniEccanvas from '@/components/uni-ec-canvas/uni-ec-canvas.Vue'import * as echarts from '@/components/uni-ec-canvas/echarts'

在echarts官网中找自己想要的图标使用即可，此处以柱状图为例

<template>    <view>            <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">            </uni-ec-canvas>    </view></template> <script>import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'import * as echarts from '@/components/uni-ec-canvas/echarts'let chart = nullexport default {        components: {                uniEcCanvas        },        data() {                return {                        ec: {    lazyLoad: true                        },                        option: {    tooltip: {            trigger: 'axis',            axisPointer: { // 坐标轴指示器，坐标轴触发有效                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'            }    },    grid: {            left: '40',            right: '40',            bottom: '3%',            containLabel: true    },    xAxis: {            type: 'cateGory',            axisTick: {                    show: false,            },            nameTextStyle: {                    color: '#666666'            },            axisLabel: {                    show: true,                    textStyle: {color: '#666',fontSize: '12',fontWeight:'bold'                    }            },            axisLine: {                    lineStyle: {color: '#666',width: 1                    }            },            data: ["寿险", "重疾", "意外", "医疗", "年金"],    },    yAxis: {            type: 'value',            axisLine: {                    show: false, //y轴线消失            },            axisLabel: {                    show: true,                    textStyle: {color: '#666',fontSize: '11'                    }            },            axisTick: {                    show: false,            },    },    series: [{            barWidth: 20,            type: 'bar',            data: [20, 50, 40, 10, 20],            itemStyle: {                    nORMal: {//每根柱子颜色设置color: function(params) {        const colorList = ["#FFC600", "#21A5FF", "#FF6000", "#00D69C",                "#998BFF"        ];        return colorList[params.dataIndex];}                    }            },            label: {                    show: true,                    position: 'top',                    formatter: '{c}万',                    color: '#666666',                    fontStyle: 'PingFang SC',                    fontWeight: 'bold',                    fontSize:'8'            }    }]                        },                }        },        methods: {                initChart(canvas, width, height, canvasDpr) {                        console.log(canvas, width, height, canvasDpr)                        chart = echarts.init(canvas, null, {    width: width,    height: height,    devicePixelRatio: canvasDpr                        })                        canvas.setChart(chart)                        chart.setOption(this.option)                        return chart                },        },        onLoad() {                setTimeout(() => {                        console.log(this.$refs)                }, 2000)                this.$refs.canvas.init(this.initChart)        },}</script><style>.uni-ec-canvas {        width: 100%;        height: 500rpx;        display: block;        margin-top: 30rpx;}</style>

来源地址：https://blog.csdn.net/qq_45822157/article/details/132066137