在electron-vue 中使用echarts

electron框架是一款使用前端语言开发桌面端程序的框架，electron-vue则是将Vue框架与electron框架相结合，让前端人员可以像写Vue一样写前端代码，同时再结合一些类似于ElementUI的框架，则更是有一种将前端封进桌面的程序的效果。

在使用electron-vue时，通过ElementUI框架，我们可以减少对系统原生组件的调用，减少主进程和渲染进程之间的通讯，简化开发。

接下来，介绍一下在electron-vue中使用echarts可视化图标框架的用法。

1. 使用npm或者cnpm命令安装echarts

npm install --save echarts

2. 在electron-vue框架的main.js文件中引入echarts。

import * as echarts from 'echarts' // 导入echarts
 
Vue.prototype.$echarts = echarts // 绑定原型，以后可以在组件中使用this.$echarts

需要注意的是，导包环节不是import echarts from 'echarts'，而是import * as echarts from 'echarts'，不然在初始化图表时会出现：Cannot read property 'init' of undefined 错误。

3. 接下来就可以在组件中导入数据初始化，正常使用

<template>
    <div>
        // 建议div要加上宽和高的CSS设置，否则可能会不出现图形
        <div id="echarts_graph" style="width: 400px;height: 400px;">
        </div>
    </div>
</template>
<script>
export default{
    mounted(){
        let myChart = this.$echarts.init(document.getElementById('echarts_graph'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在electron-vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    } 
}

</script>

4. 大功告成