代码拉取完成,页面将自动刷新
这是一个演示在vue项目中如何使用echarts的示例项目; 此项目使用vue-cli-2.9版本进行初始化.
vue-charts是基于echarts的一层封装, 目的是更方便的在vue项目中使用echarts图表进行数据展示.
echarts
: echarts
的核心包vue-echarts
:对echarts的封装, 对外提供v-chart
组件, 方便使用echarts进行数据图表的展示.echarts-gl
: 提供了echarts
中所有图表所需要的依赖模块, 也可根据具体使用的图表,按需引入所需依赖模块.// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 导入echarts
import ECharts from 'vue-echarts';
// echarts-gl中包含所有图标需要的依赖模块
import 'echarts-gl';
// 手动引入 ECharts 各模块来减小打包体积
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/component/tooltip'
// 注册全局组件
Vue.component('v-chart',ECharts);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
在组件中注册echarts
import ECharts from 'vue-echarts';
// echarts-gl包含大部分图表所需要的依赖模块
import 'echarts-gl';
// 按需引入不同的图表需要的依赖
// import 'echarts/lib/chart/line';
// import 'echarts/lib/component/polar';
// import 'echarts/lib/chart/gauge';
export default {
name: 'HelloWorld',
components:{
'v-chart': ECharts
},
data(){
return {
//堆叠折线图所需参数对象
myline:{
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
}
}
}
<div>
<!-- 调用v-chart组件:渲染折线图 -->
<v-chart :options="myline"></v-chart>
</div>
vue
组件的data
中<v-chart :options="参数对象"/>
渲染图表即可js部分引用本地图片建议使用
require('相对路径')
的方式, 因为打包以后的路径并不是源文件里的路径, 所以直接使用相对路径是无法正确引用到目标图片的.
html模板部分之所以可以直接按照相对路径引入, 是因为html被打包后和资源图片的相对路径关系基本是不会改变的.
globe:{
backgroundColor: '#000',
globe: {
baseTexture: require('../assets/earth/earth.jpg'),
heightTexture: require('../assets/earth/bathymetry_bw_composite_4k.jpg'),
displacementScale: 0.1,
shading: 'lambert',
environment:require('../assets/earth/starfield.jpg'),
light: {
ambient: {
intensity: 0.1
},
main: {
intensity: 1.5
}
},
layers: [{
type: 'blend',
blendTo: 'emission',
texture:require('../assets/earth/night.jpg')
}, {
type: 'overlay',
texture:require('../assets/earth/clouds.png'),
shading: 'lambert',
distance: 5
}]
},
series: []
}
}
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。