uniapp 小程序 引用echarts

1. 到uniapp插件市场dcloud或到gitee下载lime-echart插件, 下载后会放在src文件夹下的uni_modules中
   dcloud: https://ext.dcloud.net.cn/plugin?id=4899
   gitee: https://gitee.com/liangei/lime-echart
2. 文件包过大问题, 可以选择自定义图表, 到echarts网址中选择需要的图表然后下载echarts.min.js文件, 然后与uni_modules中static下的echarts.min进行替换
3. 使用
   在需要图表的页面:

//引入echarts
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
//模板使用
<view><l-echart ref="chart" @finished="init"></l-echart></view>
//option和methods
export default {
    data() {
        return {
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' 
                    },
                    confine: true
                },
                legend: {
                    data: ['热度', '正面', '负面']
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 15,
                    top: 40,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
                        axisLine: {
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                        axisLabel: {
                            color: '#666666'
                        }
                    }
                ],
                series: [
                    {
                        name: '热度',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: [300, 270, 340, 344, 300, 320, 310],
                    },
                    {
                        name: '正面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        data: [120, 102, 141, 174, 190, 250, 220]
                    },
                    {
                        name: '负面',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'left'
                            }
                        },
                        data: [-20, -32, -21, -34, -90, -130, -110]
                    }
                ]
            },
        };
    },
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    // 1、在页面mounted里调用，有时候mounted 组件也未必渲染完成
    mounted() {
        // init(echarts, theme?:string, opts?:{}, chart => {})
        // echarts 必填， 非nvue必填，nvue不用填
        // theme 可选，应用的主题，目前只支持名称，如：'dark'
        // opts = { // 可选
        //  locale?: string  // 从 `5.0.0` 开始支持
        // }
        // chart => {} ， callback 返回图表实例
        this.$refs.chart.init(echarts, chart => {
            chart.setOption(this.option);
        });
    },
    // 2、或者使用组件的finished事件里调用
    methods: {
        async init() {
            // chart 图表实例不能存在data里
            const chart = await this.$refs.chart.init(echarts);
            chart.setOption(this.option)
        }
    }
}

原文链接: https://zhuanlan.zhihu.com/p/628615818