uniapp中echarts的简单使用

1.在DCLOUD插件市场导入echarts

 

基础用法

<view style="width: 100%; height:500rpx"><l-echart ref="chart"></l-echart></view>
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
export default {
    data() {
        return {
            option: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        confine: true
                    },
                    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 },
                            axisLine: {
                                lineStyle: {
                                    color: '#999999'
                                }
                            },
                            axisLabel: {
                                color: '#666666'
                            }
                        }
                    ],
                    dataset: {
			dimensions:['product', '收缩压', '舒张压'],
			source: [
							//存放数据
			]
		    },
                    series: [
                        {
                            name: '热度',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            itemStyle: {
                                // emphasis: {
                                //   color: '#37a2da'
                                // }
                            }
                        },
                        {
                            name: '正面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                // emphasis: {
                                //   color: '#32c5e9'
                                // }
                            }
                        },
                        {
                            name: '负面',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'left'
                                }
                            },
                            itemStyle: {
                                // emphasis: {
                                //   color: '#67e0e3'
                                // }
                            }
                        }
                    ]
                },
        };
    },
    mounted() {
        this.$refs.chart.init(config => {
            const { canvas } = config;
            const chart = echarts.init(canvas, null, config);
            canvas.setChart(chart);
            chart.setOption(this.option);
            // 需要把 chart 返回
            return chart;
        });
    }
}    

　　要注意通过接口获取数据然后直接改变option配置项中的数据时，图表是不会更新的

所以需要调用这个this.$refs.chart.setOption(this.option,true)，表示数据不默认合并。之后图标就会更新了