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)，表示數據不默認合並。之后圖標就會更新了