zoukankan html css js c++ java

vue2.0 自定义饼状图（Echarts）组件

1.自定义图表组件

Echarts.vue

<!-- 自定义 echart 组件 -->
<template>
  <div>
    <!-- echart表格 -->
    <div id="myChart" :style="echartStyle"></div>
  </div>
</template>
 
<script>
  export default {
    props: {
      // 样式
      echartStyle: {
        type: Object,
        default(){
          return {}
        }
      },
      // 标题文本
      titleText: {
        type: String,
        default: ''
      },
      // 提示框键名
      tooltipFormatter: {
        type: String,
        default: ''
      },
      // 扇形区域名称
      opinion: {
        type: Array,
        default(){
          return []
        }
      },
      // 提示框标题
      seriesName: {
        type: String,
        default: ''
      },
      // 扇形区域数据
      opinionData: {
        type: Array,
        default(){
          return []
        }
      },
    },
    data(){
      return {
        //
      }
    },
    mounted(){
      this.$nextTick(function() {
        this.drawPie('myChart')
      })
    },
    methods: {
      // 监听扇形图点击
      eConsole(param) {
        // 向父组件传值
        this.$emit("currentEchartData",param.name);
      },
      // 绘制饼状图
      drawPie(id){
        this.charts = this.$echarts.init(document.getElementById(id));
        this.charts.on("click", this.eConsole);
        this.charts.setOption({
          title: {
            text: this.titleText, // 标题文本
            left: 'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
          },
          legend: {
            bottom: 20,
            left: 'center',
            data: this.opinion // 扇形区域名称
          },
          series : [
            {
              name:this.seriesName,  // 提示框标题
              type: 'pie',
              radius : '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data:this.opinionData, // 扇形区域数据
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script>
 
<style lang="less" scoped>
  #myChart{
     100%;
  }
</style>

2.页面调用

Diagram.vue

<!-- 图表 -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="图表">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 内容 -->
    <m-echarts
      :echartStyle="s"
      :titleText="a"
      :tooltipFormatter="b"
      :opinion="c"
      :seriesName="d"
      :opinionData="e"
      v-on:currentEchartData="getEchartData"
    ></m-echarts>
  </div>
</template>
 
<script>
  import mEcharts from '../components/Echarts'
 
  export default {
    name: 'Diagram',
    components: {
      mEcharts
    },
    data(){
      return {
        a:'水果销售统计',
        b:'销售数量',
        c:['香蕉','苹果','橘子'],
        d:'销售统计',
        e:[
            {value:3, name:'香蕉'},
            {value:3, name:'苹果'},
            {value:3, name:'橘子'}
          ],
        s: {
          height: ''
        }
      }
    },
    created(){
      // 获取屏幕高度
      this.s.height = document.documentElement.clientHeight - 44 + 'px';
    },
    methods: {
      getEchartData(val){
        console.log(val);
      }
    }
  }
</script>
 
<style lang="less" scoped>
  //
</style>

3.效果图

查看全文

相关阅读:
Golang Failpoint 的设计与实现
 没涉及到最值求解；观点：矩阵乘法无法表达出结果。现实生活中事件、现象的数学表达
 多元微分学枚举破解15位路由器密码存储空间限制拆分减长，求最值数据去重
 ARP Poisoning Attack and Mitigation Techniques ARP欺骗中间人攻击 Man-In-The-Middle (MITM) attack 嗅探防范 Can one MAC address have two different IP addresses within the network?
The C10K problem
HTTP Streaming Architecture HLS 直播点播 HTTP流架构
 现代IM系统中消息推送和存储架构的实现
 现代IM系统中的消息系统架构
 长连接锁服务优化实践 C10K问题 nodejs的内部构造 limits.conf文件修改 sysctl.conf文件修改
 doubleclick cookie、动态脚本、用户画像、用户行为分析和海量数据存取推荐词京东电商信息上传黑洞 https://blackhole.m.jd.com/getinfo

原文地址：https://www.cnblogs.com/hzcya1995/p/13300661.html

vue2.0 自定义 饼状图 （Echarts）组件

vue2.0 自定义饼状图（Echarts）组件