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

时间 2019-11-19

标签 vue 使用 echarts 以及环形运用实例繁體版

原文原文链接

安装echarts依赖

npm install echarts -S


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

一、安装镜像vue

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


二、安装依赖

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 替换，并挂载到实例上去以后调用node

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

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

按需引入

上面全局引入会将全部的echarts图表打包，致使体积过大，因此我以为最好仍是按需引入。dom

渲染部分函数

<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 必须把路径写全。ui

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