Echarts的学习与使用

今天我们来学习一下Echarts，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架，本文基于Vue CLI脚手架，来实现Echarts的引用，跟着我一起来学习吧~

一.引入一个简单的图表

首先npm安装Echarts

npm install echarts --save

接下来打开`public`->`src`->`main.js`来引入echarts

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

绘制一个简单的容器

<template>
<h-page-content>
<div id="myChart" :style="{width: '600px', height: '400px'}"></div>
</h-page-content>
</template>

创建一个简单的图表

你可以在这里查找样例echarts图表，注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

<script>
export default {
    name: 'EchartsIndex',
    mounted () {
        this.drawLine()
    },
    methods: {
        drawLine () {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series: [{
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }]
            })
        }
    }
}
</script>

这样你的第一个图表就诞生了！

初始化图表.png

接下来就可以根据自己的需求来自定义图表了

自定义图表.png

二.图表参数配置

学习更多可以查看Echarts配置项手册

1.title

标题组件，包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

title: {
    text: '金融资产详情',     //主标题
    subtext: '金融资产次级标题'    //副标题
}

提示框组件。提示框组件的通用介绍：提示框组件可以设置在多种地方：

可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip

tooltip: {
    trigger: 'item',   //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
    backgroundColor: 'rgb(245,245,245,0.9)',   //设置提示框背景颜色
    padding: [15, 20],    //设置提示框内边距
    textStyle: {
        color: '#4F4F4F'   //设置提示框内字体颜色
    },
    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);'  //额外附加到浮层的 css 样式，如为浮层添加阴影
}

3.legend

图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。当图例数量过多时，可以使用滚动图例（垂直）或滚动图例（水平）。

legend: {
    bottom: 0,     //设置图例组件离容器下侧的距离
    left: 'center',    //设置图例组件离容器左侧的距离
    icon: 'circle',   //设置图例组件图标为圆形
    textStyle: {
        color: '#4F4F4F',   //设置图例组件字体颜色
        fontSize: '14'   //设置图例组件字体大小
    },
    hoverAnimation: false,   //是否开启 hover 在扇区上的放大动画效果
    data: ['存款余额', '活期余额', '定期余额', '通知存款余额', '贷款余额', '理财余额', '国债余额', '基金余额']    //图例的数据数组
}

4.color

设置数据区域颜色。

color: ['#1E90FF', '#40E0D0', '#43CD80', '#EEC900', '#FF6A6A', '#9B30FF', '#3A5FCD', '#27408B']

5.series

系列列表。每个系列通过 type 决定自己的图表类型。

series: [{
    // name: '',
    type: 'pie',
    radius: ['30%', '50%'],  //设置饼图半径
    selectedMode: 'single',   //选中模式，表示是否支持多个选中，默认关闭
    hoverAnimation: false,   //是否开启 hover 在扇区上的放大动画效果
    label: {
        normal: {
            textStyle: {
                fontSize: '14',   //设置饼图文字格式
                color: '#4F4F4F'   //设置饼图文字颜色
            },
            formatter: function (data) {
                return data.name + ' : ' + data.percent.toFixed(2) + ' % '  //用来格式化引出文字文本，支持字符串模板和回调函数两种形式，保留两位小数
            }
        }
    },
    labelLine: {
        smooth: true   //是否平滑视觉引导线，默认不平滑
    },
    data: [          //系列中的数据内容数组
        { value: 982, name: '存款余额' },
        { value: 968, name: '活期余额' },
        { value: 1332, name: '定期余额' },
        { value: 2034, name: '通知存款余额' },
        { value: 2582, name: '贷款余额' },
        { value: 1403, name: '理财余额' },
        { value: 0, name: '国债余额' },
        { value: 701, name: '基金余额' }
    ],
    itemStyle: {
        normal: {
            borderWidth: 2,   //设置描边线宽
            borderColor: 'white'  //设置描边颜色
        },
        emphasis: {     //图形的高亮样式
            shadowColor: 'rgba(0, 0, 0, 0.5)'  //
文字块的背景阴影颜色
        }
    }
}]

详细的学习教程可以参考Echarts学习网址