Echarts

Echarts

echarts 可以对数据进行可视化显示，可以以图表的形式显示。

安装依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

创建图表

在 main.js中引入

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

在vue文件中 先创建 dom 区域

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

在vue文件中 script 部分进行具体的编写

**注意：**我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

具体步骤：

• 基于准备好的画图表的地方，初始化echarts实例
• 指定图表的配置项和数据
• 使用刚指定的配置项和数据显示图表

<script>

export default {
    name: 'echartLearn',
    data(){
        return{
        }
    },
    mounted(){
        this.drawLine();
    },
    methods:{
        drawLine(){
            // 基于准备好的画图表的地方，初始化echarts实例   --> 此处， 除了默认主题外，内置了两套主题，分别为 light 和 dark
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            
            // 指定图表的配置项和数据
            let option = {
                title:{text:'echarts learn'},// 图表标题
                tooltip:{}, // 配置提示信息
                legend:{ // 图例设置  还可以控制 其 显不显示
                    data: [{
                        name:'销量',
                        icon:'circle',
                        textStyle:{
                            color:'red'
                        }
                    }]   
                },
                // x 轴的显示项
                xAxis:{
                    data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                // y 轴的显示项
                yAxis:{},
                // 系列列表，通过 type 决定自己的图表类型
                series:[{
                    name:'销量',  // 系列名称
                    type:'bar',  // 系列图表类型
                    data:[5,20,36,10,10,20]  // 系列中的数据内容
                }]
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        }
    }
}
</script>

显示效果：

另外一个例子： 实现饼图

<script>

export default {
    name: 'echartLearn',
    data(){
        return{
            
        }
    },
    mounted(){
        this.drawLine();
    },
    methods:{
        drawLine(){
            // 基于准备好的画图表的地方，初始化echarts实例   --> 此处， 除了默认主题外，内置了两套主题，分别为 light 和 dark
            let myChart = this.$echarts.init(document.getElementById('myChart'),'dark');
            let pieOption = {
                title:{text:'echarts learn pie'},// 图表标题
                series:[
                    {
                        name:'访问来源',
                        type:'pie',  // 设置图表类型为饼图
                        radius:'55%', // 饼图的半径，外半径为可视区尺寸
                        // roseType:'angle', // 将饼图显示成南丁格尔图
                        data:[
                            {value:235,name:'视频广告'},
                            {value:274,name:'联盟广告'},
                            {value:310,name:'邮件营销'},
                            {value:335,name:'直接访问'},
                            {value:400,name:'搜索引擎'}
                        ],
                        // itemStyle 可以设置阴影、透明度、颜色、边框颜色、边框宽度等信息
                        itemStyle:{ 
                            normal:{
                                shadowBlur:200, // 阴影
                                ShadowColor:'rgba(0,0,0,0.5)' // 阴影的颜色
                            }
                        }
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(pieOption);
        }
    }
}
</script>

显示效果：

图表的种类

type 决定自己的图表类型
    bar 柱状 / 条形图
    line 折线 / 面积图
    pie 饼图
    scatter 散点图
    effectScatter 带有涟漪特效动画的散点
    radar 雷达图
    tree 树形图
    treemap 树型图
    sunburst 旭日图
    boxplot 箱型图
    candlestick k线图
    heatmap 热力图
    map 地图
    parallel 平行坐标系的系列
    lines 线图
    graph 关系图
    sankey 桑基图
    funnel 漏斗图
    gauge 仪表盘
    pictorualBar 象形柱图
    themeRiver 主题河流
    custom 自定义系列

/*
    所有数据的更新都通过 setOption 实现，那么只需要设置一个 定时器 定时 去 获取数据，setOption填入数据，
    而不用考虑数据到底产生了哪些变化，Echarts 会找到两组数据之间的差异，然后通过合适的动画去 表现 数据的变化。
*/

可能出现的问题

一开始编写完echarts，但页面中迟迟不显示，基于这个问题的解决。

如果echarts启动成功了，虽然在 template 中只写了一行 div，但在页面中的显示如下：

它会被包围在一个新的div中，并且里面会多一个canvas。

那么如果未显示canvas的话，就证明echarts没有启动成功。

此时需要检查 是否在 mounted() 中进行实例化，因为我们要确保dom元素已经挂载到页面中。

---

希望可以帮助到你