在IDEA里面写vue-cil和echarts结合的例子
1.在index.html里面引入echarts全局对象<!--引入全局echarts--><script src="./static/lib/echarts.min.js"> </script>2.在main.js里面, 将全局的echarts对象挂载到vue的原型对象上//将全局的echarts对象挂载到vue原型对象上Vue.prototype.$echa
·
1.在index.html里面引入echarts全局对象
<!--引入全局echarts -->
<script src="./static/lib/echarts.min.js"> </script>
2.在main.js里面, 将全局的echarts对象挂载到vue的原型对象上
//将全局的echarts对象挂载到vue原型对象上
Vue.prototype.$echarts = window.echarts
3.建立一个组件,这里是left.vue,写echarts
<template>
<div class="com-container">
<div class="com-chart" ref="left1_ref"> </div>
</div>
</template>
<script>
// import __ from '__' // __是需要手动引入的文件
export default {
name: 'left',
components: {},
data() {
return{
chartInstance : null,
}
},
mounted(){
this.initChart();
this.getData();
},
methods: {
//初始化图表
initChart(){
this.chartInstance = this.$echarts.init(this.$refs.left1_ref);
},
//获取服务器数据
getData(){
this.Data1 = [ "旅游","教育", "游戏", "医疗", "电商", "社交", "金融", "旅游","教育", "游戏"];
this.Data2 = [200, 300, 300, 600,900, 1200, 1500, 900, 500, 300 ];
this.updateChart();
},
//更新图表
updateChart(){
const value1 = this.Data1;
const value2 = this.Data2;
const option = {
xAxis: {
type: 'category',
data: value1,
},
yAxis: {
type: 'value',
},
series: [
{
data: value2 ,
type: 'bar',
smooth: true
},
]
}
this.chartInstance.setOption(option);
}
}
}
</script>
<style lang="postcss" scoped>
/*body {
background-color: #ff0000;
}*/
</style>
4.注册路由,在index.js里面
export default new Router({
routes: [
{
path: '/leftpage',
//name: 'home',
//components: {leftpage} ,
component: left,
//component: resolve => require(['../components/left.vue'],resolve)
}
]
})
5.设置容器的大小,建一个css的文件
.com-chart{
width: 100%;
// height:100%;
height:600px;
overflow: hidden;
}
6.运行项目
更多推荐
已为社区贡献2条内容
所有评论(0)