uniapp echart使用

该方案进解决echart在uni中渲染展示问题,交互效果不佳
https://gitee.com/klus-liang/echats-components-uni-app.git
通过vif渲染来避免多组件时渲染错误
使用

<template>
  <echarts v-if="showEchart" :option="options" :height="'180upx'"/>
</template>
<script>
import echarts from '@/components/echart/echart'
export default {
    components: {echarts},
    data() {
      return {
         options: {},
         showEchart: false 
      }
    }
    onLoad() {
      this.options = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                  trigger: 'item'
              },
              legend: {
                  orient: 'vertical',
                  left: 'left'
              },
              series: [
                  {
                      name: 'Access From',
                      type: 'pie',
                      radius: '50%',
                      data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                      ],
                      emphasis: {
                            itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                               }
                      }
                  }
              ]
        }
    }
    this.showEchart = true
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容