vue项目中按需引入echarts使用LinearGradient渐变

4,247 阅读1分钟

1.当然首先安装echarts依赖

npm install echarts --save

2.引入echarts

注意写法有部分不一样

2.1按需引入(推荐)

// main.js

// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts')
// 引入折线图/柱状图等组件,按自己项目需要
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')
// 引入echarts其他组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')
require('echarts/lib/component/graphic')

Vue.prototype.$echarts = echarts

2.2全部引入

// main.js

// 引入全部echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.组件内初始化

this.myChart = this.$echarts.init(document.getElementById('myChart'));

4.组件内使用LinearGradient

color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0[
    {offset: 1, color: '#FAD93E'},
    {offset: 0, color: '#DEFF38'},
])

最后,之前在网上搜如何使用渐变的时候,看到有人推荐使用在组件内再引入一次echarts,我个人习惯是在main.js已经引入,就不要在组件内再次引入了