2019/10/30

vue echarts引入 自定义主题

首先安装echarts

	npm install echarts --save

在main.js中引入

	import echarts from 'echarts'// echarts
	
	//挂载到vue的原型上
	Vue.prototype.$echarts = echarts

在vue文件中使用

template

	<div id="Line" :style="{ height: '500px'}"></div>

methods

			let myChart = this.$echarts.init(document.getElementById('Line'),'walden')
            // 绘制图表
            let option = {
                // color: ['#3398DB'],
                title: {
                    text: this.chartTitle,
                    x: 'center',
                    align: 'right'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {readOnly: false},
                        magicType: {type: ['bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    //x轴数据
                    data: this.lineData.xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                	//y轴数据
                    data: this.lineData.yData,
                    type: 'line'
                }]
            };
            myChart.setOption(option);
            //响应式监听
            window.addEventListener("resize", () => { myChart.resize();});

下载自定义主题

在官网下载自定义主题

复制json的版本
比如我现在复制了一个自定义主题json版本
在vue项目的src/assets目录下新建theme.js文件
theme.js

	const theme = 你复制的json
	export default theme

在vue文件中引入

import theme from '../assets/theme'

注册主题

this.$echarts.registerTheme('theme', theme) // 注册主题

创建图表的方法

			// 注册主题
			this.$echarts.registerTheme('walden', walden) // 注册主题
            // 基于准备好的dom，初始化echarts实例 第二个参数为注册完成的主题
            let myChart = this.$echarts.init(document.getElementById('Line'),'walden')
            // 绘制图表
            let option = {
                // color: ['#3398DB'],
                title: {
                    text: this.chartTitle,
                    x: 'center',
                    align: 'right'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {readOnly: false},
                        magicType: {type: ['bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.lineData.xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.lineData.yData,
                    type: 'line'
                }]
            };
            myChart.setOption(option);
            //响应式监听
            window.addEventListener("resize", () => { myChart.resize();});

完成