vue 使用echarts以及环形图的运用实例

安装echarts依赖

npm install echarts -S

或者使用国内的淘宝镜像：

1、安装镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装依赖

cnpm install echarts -S

创建图表

全局引入

• main.js

  // 引入echarts
  import echarts from 'echarts'
  
  Vue.prototype.$echarts = echarts 

 

• Hello.vue

  <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

  

  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({
              title: { text: '在Vue中使用echarts' },
              tooltip: {},
              xAxis: {
                  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
              },
              yAxis: {},
              series: [{
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
              }]
          });
      }
    }
  }

  

  注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

看了很多vue中echarts的运用博客，偷了一下懒，以上代码是参考网友的博客，接下来是我自己实站项目中运用到的示例，项目中用到了大量图表，这里只展示部分，运用的是按需引入echarts，只做学习分享参考

项目中设计的设计稿比较好看，我写的代码还没经过优化，用到的图表也有很多类型，话不多少，直接看代码：

按需引入

上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。

渲染部分

<ul>
    <li>
        <div id="add"></div>
        <h3 class="title">新增客户数</h3>
        <p class="chart-tit"><span class="business">商机客户数：15</span><span class="deal">成交客户数：5</span></p>
        <i class="charts-close"></i>
    </li>
    <li>
        <div id="baifang"></div>
        <h3 class="title">客户拜访</h3>
        <p class="chart-tit"><span class="daily">日常拜访：10</span><span class="task">任务拜访：5</span></p>
        <i class="charts-close"></i>
    </li>
    <li>
        <div id="success"></div>
        <h3 class="title">商机成功率</h3>
        <p class="chart-tit"><span class="conduct">进行中：10</span><span class="suc">成功：5</span><span class="fail">失败：5</span></p>
        <i class="charts-close"></i>
    </li>
</ul>

js 代码部分

<script>
    let echarts = require('echarts/lib/echarts');
    require('echarts/lib/chart/pie');
    require('echarts/lib/chart/funnel');
    require('echarts/lib/chart/line');
    require('echarts/lib/component/title');      
    require('echarts/lib/component/tooltip');      
    require('echarts/lib/component/legend');      
    require("echarts/lib/component/legendScroll");
    require("echarts/lib/chart/bar");

    export default {
        props: {
            height: {
                type: String,
                default: '251'
            }
        },
        mounted () {
            this.drawLine()
        },
        methods: {
            drawLine() {
                let dom1 = document.getElementById("add"),
                dom2 = document.getElementById("baifang"),
                dom3= document.getElementById("success"),
                dom4= document.getElementById("sale"),
                dom5= document.getElementById("saletop"),
                dom6= document.getElementById("income"),
                myChart1 = echarts.init(dom1),
                myChart2 = echarts.init(dom2),
                myChart3 = echarts.init(dom3),
                myChart4 = echarts.init(dom4),
                myChart5 = echarts.init(dom5),
                myChart6 = echarts.init(dom6),
                option1 = null,
                option2 = null,
                option3 = null,
                option4 = null,
                option5 = null,
                option6 = null;

                option1 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                    },
                    color:['#43DCFF', '#C0EF84','yellow','blueviolet'],
                    legend: {
                        show: false,
                        y: 'bottom',
                        orient : 'horizontal',
                        data:[{
                            name:'商机客户数',
                            textStyle:{
                                fontSize:12,
                                color:'#677994'
                            },
                            icon: `image://${require('./images/business.png')}`
                        },{
                            name:'成交客户数',
                            textStyle:{
                                fontSize:12,
                                color:'#677994'
                            },
                            icon: `image://${require('./images/customer.png')}`
                        }]
                    },
                    series: [
                    {
                        name:'新增客户数',
                        type:'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        hoverOffset: 0,
                        hoverAnimation: false,
                        tooltip:{
                            show:false
                        },
                        itemStyle:{
                            opacity: 0
                        },
                        label: {
                            normal: {
                                position: 'center',
                                formatter: '{per|{c}}{b|个}\n{a|{b}}\n{hr|}',
                                rich: {
                                    per: {
                                        color: '#0abffd',
                                        fontSize: 28,
                                        lineHeight: 28,
                                        align: 'center'
                                    },
                                    a: {
                                        color: '#999999',
                                        align: 'center',
                                        fontSize: 12                                        
                                    },
                                    b: {
                                        color: '#0abffd',
                                        fontSize: 12,
                                        lineHeight: 40,
                                        align: 'center'
                                    },
                                    hr: {
                                        width: '100%',
                                        height: 0,
                                        alien:'center'
                                    }
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                        {
                            value:20,
                            name:'新增客户数'
                        }
                        ]
                    },
                    {
                        name:'新增客户数',
                        type:'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        color:['#43DCFF', '#C0EF84'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                        {value:15, name:'商机客户数'},
                        {value:5, name:'成交客户数'},
                        ]
                    }
                    ]
                };
　　　　　　　　　// ...这里省略了大量配置echarts代码var mycharts =  function(option,chart){
                    if (option && typeof option === "object") {
                        return chart.setOption(option, true);
                    }
                }
                mycharts(option1,myChart1);
                mycharts(option2,myChart2);
                mycharts(option3,myChart3);
                mycharts(option4,myChart4);
                mycharts(option5,myChart5);
                mycharts(option6,myChart6);
            }
        }
    }
</script>

先看效果图：

这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。

注：圆环中间也利用了一个饼状图，这里用了echarts 里的富文本控制中间的文字样式，底部文字尝试过用label控制，考虑到后面的数据是接口返回的数据，在echarts初始化时不好处理，就直接用<p></p>标签代替

转载于:https://www.cnblogs.com/shenpeng/p/10006500.html