步骤:
第一步:
通过: NPM 安装 ECharts;
npm install echarts --save
第二步:
在 vue项目中的package.json中查看是否安装成功:
第三步:
在项目文件中使用;
<template>
<div class="test">
<!-- <h1>setup测试代码</h1> -->
<!-- 柱状图 -->
<div>
<template>
指标名称:
<el-select v-model="value" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
时间节点:
<el-input
v-model="input"
:disabled="true">
</el-input> -
<el-input
v-model="input"
:disabled="true">
</el-input>
</div>
<div id="main" style="width: 100%;height: 500px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data(){
return{
}
},
mounted() {
this.initCharts();
},
methods: {
// 柱状图
initCharts() {
// 基于准备好的dom,初始化echarts实例
let chartDom = document.getElementById("main")
let myChart = echarts.init(chartDom);
// 指定图表的配置项和数据
let option = {
tooltip: {},
xAxis: {
data: ['下沙', '白杨', '文潮', '河庄', '义蓬', '新湾','临江','前进']
},
yAxis: {},
series: [
{
name: '',
type: 'bar',
data: [5, 20, 36, 10, 20,26,33,50]
}
]
};
myChart.setOption(option);
window.addEventListener("resize",()=>{
myChart.resize()
})
},
}
}
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 100%
}
</style>
注意:
实例:
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/188581.html