(echarts)vue项目中引入Echarts图表
项目场景:
油气智慧平台图表使用
解决方案:
1.下载安装依赖
npm install echarts --save
2.在main.js中全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
或
import * as echarts from "echarts"
Vue.prototype.$echarts = echarts
3.使用
// Tjjg.vue
<div id="Tjjg" style="width: 100%;height:300px;"></div>
<script>
export default {
name: 'Tjjg',
data() {
return {}
},
mounted() {
this.Tjjg()
},
methods: {
Tjjg() {
// 基于准备好的dom,初始化echarts实例
let myChart1 = echarts.init(document.getElementById('Tjjg'))
// 绘制图表
var option = {
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
type: 'category',
data: ['MAE', 'MSE', 'RMSE'],
},
yAxis: {
name: '数据',
type: 'value',
axisLine: { show: true },
nameTextStyle: {
fontSize: 14,
},
},
series: [
{
name: '数据',
type: 'bar',
barWidth : 30, //柱子的粗细
data: [1.21, 0.58, 1.96],
},
],
}
myChart1.setOption(option)
},
},
}
</script>
4.效果
如果想在父组件调用:
父组件:
// wellLogging.vue
<div style="width: 97%; height: 300px;">
<a-spin v-if="isSpain" />
// 子组件嵌入
<Tjjg />
</div>
<script>
// 子组件导入
import Tjjg from '@/components/yq/chart/Tjjg'
export default {
name: 'wellLogging',
// 子组件注册
components: { Tjjg },
data() {
return {}
},
}
</script>