【vue学习】vue里使用echarts

官网地址
echarts.apache.org
echartsjs.com

一、安装echarts
npm install echarts --save

二、直接上Demo

<template>
    <div>
        <!-- div的长宽要有 -->
        <div id="myChart" style="width:500px;height:500px;"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
//echart对应的主题
import 'echarts/theme/macarons.js'
export default {
    name: 'hello',
    data () {
        return {
            
        }
    },
    
    methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(
                document.getElementById('myChart'), 
                'macarons'
            )
            // 绘制图表
            myChart.setOption({
                title: { text: '在Vue中使用echarts' },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line'
                }]
            });
        }
    },
    mounted(){
        this.$nextTick( () => {
            this.drawLine();
        })
        
    },
}
</script>

三、几点说明

• ① 若是就具体某个页面引用，就按demo中在具体页面引入即可

• ② 若多页面需要，则可在入口文件（如main.js）全局引入

    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
  

• ③ 具体页面使用this.$echarts即可

• ④.a echarts主题切换（init的第二个参数，可选）

  

• ④.b echarts的主题文件目录(echarts工程目录下的theme目录）;

• ④.c 另外还可以定制并下载主题

• ⑤ 使用require按需引入：import echarts from 'echarts'会将所有的echarts图表打包，导致体积过大；【除了引入，其他写法不变】

四、具体每种图表怎么配置参考官方实例即可：点击即可查看相关代码

五、自定义构建 ECharts

一般来说，可以直接从 CDN 中获取构建后的 echarts，也可以从 GitHub 中的 echarts/dist 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：

• 完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件
• 常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件
• 精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件

我们也可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。可以用这几种方式自定义构建：

• 在线自定义构建：比较方便。
• 使用 echarts/build/build.js 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。
• 直接使用构建工具（如 rollup、webpack、browserify）自己构建：也是一种选择。