vue2.0之echarts使用
Posted 美力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2.0之echarts使用相关的知识，希望对你有一定的参考价值。
1.首先下载echart依赖
npm install echarts --save
备注:npm 安装报错时使用cnpm
2.全局注册 在main.js里引入echart并在vue中注册echart
// 引入echarts
import echarts from ‘echarts‘;
Vue.prototype.$echarts = echarts;
3.在所使用模块 直接使用$echarts
<script>
methods:{
//绘制线性图
drawLine(id, titleName, gridData, yAxisName, legendData, xAxisData, seriesData) {
this.charts =this.$echarts.init(document.getElementById(id));
this.charts.setOption({
title: {
text: titleName,
x: ‘center‘
},
tooltip: {
trigger: ‘axis‘
},
legend: {
bottom: ‘5px‘,
data: legendData,
},
grid: {
left: ‘3%‘,
right: ‘4%‘,
bottom: gridData,
top: ‘60px‘,
containLabel: true
},
xAxis: {
type: ‘category‘,
boundaryGap: false,
data: xAxisData,
},
yAxis: {
type: ‘value‘,
name: yAxisName,
},
series: seriesData
})
}
},
//调用
mounted(){
this.$nextTick(function() {
this.drawLine(‘lineChart‘, this.lineChartTitle, ‘60px‘, this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
});
}
</script>
4.不在main,js引用直接在所使用模块引用
// 在所用模块引入echarts
import echarts from ‘echarts‘;
此时定义echarts时需要将
this.charts =this.$echarts.init(document.getElementById(id)); 中的this.$echarts换成echarts
this.charts = echarts.init(document.getElementById(id));
具体代码如下
<style scoped>
.searchBtn {
width: 100%;
text-align: left;
background: #fbfbfb;
border: none;
border-bottom: 1px solid #eee;
}
.describe {
display: inline-block;
font-weight: bold;
padding: 15px 10px;
}
.changeTab {
color: #10a5f8;
}
.chartBoxs {
width: 100%;
height: 2rem;
margin-top: 10px;
}
</style>
<template>
<div>
<v-head :header_title="title_context"></v-head>
<el-row :gutter="0" style="margin: 10px;">
<el-col :span="24">
<el-button class="searchBtn searchTime" @click=‘openPicker()‘>
<i class="fl el-icon-time"></i>
<span>{{searchTime}}</span>
<i class="fr el-icon-arrow-down"></i>
</el-button>
</el-col>
<el-col :span="24" style="background: white;border-bottom: 1px solid #dadada;">
<span class="describe showMonth fl">{{searchMonth}}月接收/转出情况</span>
<span class="describe changeTab fr" @click=‘changeTabView()‘>{{changeTab}}</span>
</el-col>
<el-col :span="24" style="background: white;">
<div class="chartBoxs" id="lineChart"></div>
</el-col>
</el-row>
<el-row :gutter="0" style="margin: 10px;">
<el-col :span="24" style="background: white;border-bottom: 1px solid #dadada;">
<span class="describe fl">总产量</span>
<span class="describe fr">{{total}}kg</span>
</el-col>
<el-col :span="24" style="background: white;">
<div class="chartBoxs" id="pieChart">
</div>
</el-col>
</el-row>
<template>
<mt-datetime-picker ref="picker" v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm">
</mt-datetime-picker>
</template>
</div>
</template>
<script>
import head from "../../components/head";
import { DatetimePicker } from ‘mint-ui‘;
import moment from ‘moment‘;
// 引入echarts
import echarts from ‘echarts‘;
export default {
data() {
return {
title_context: "成本分析",
searchTime: moment().format(‘YYYY-MM‘),
searchMonth: moment().format(‘MM‘),
changeTab: ‘切换转出情况‘,
pickerVisible: ‘‘,
total: 3.037,
lineChartTitle: ‘‘,
lineChartYAxisName: ‘Kg‘,
lineChartLegendData: [‘测转入‘],
lineChartXAxisData: [‘1日‘, ‘5日‘, ‘9日‘, ‘13日‘, ‘17日‘, ‘21日‘, ‘25日‘, ‘29日‘],
lineChartSeriesData: [{
name: ‘测转入‘,
type: ‘line‘,
data: [220, 182, 191, 234, 290, 360, 310, 290]
}],
chart1: {
chartSeriesData: [{
value: 2.86,
name: ‘0.5号细针管‘
},
{
value: 20,
name: ‘0.6号细针管‘
}
]
}
}
},
components: {
vHead: head,
},
methods: {
//打开时间
openPicker() {
this.$refs.picker.open();
},
//选择时间
handleConfirm(data) {
this.searchTime = moment(data).format(‘YYYY-MM‘);
this.searchMonth = moment(data).format(‘MM‘);
},
changeTabView() {
if(this.changeTab == "切换转出情况") {
this.changeTab = "切换转入情况";
this.lineChartTitle = ‘‘,
this.lineChartYAxisName = ‘Kg‘,
this.lineChartLegendData = [‘测转出‘],
this.lineChartXAxisData = [‘1日‘, ‘5日‘, ‘9日‘, ‘13日‘, ‘17日‘, ‘21日‘, ‘25日‘, ‘29日‘],
this.lineChartSeriesData = [{
name: ‘测转出‘,
type: ‘line‘,
data: [220, 182, 191, 234, 290, 360, 310, 290]
}],
this.chart1 = {
chartSeriesData: [{
value: 2.86,
name: ‘转出0.5号细针管‘
},
{
value: 20,
name: ‘转出0.6号细针管‘
}
]
}
this.drawLine(‘lineChart‘, this.lineChartTitle, ‘60px‘, this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
this.drawPie("pieChart", this.chart1.chartSeriesData);
} else if(this.changeTab == "切换转入情况") {
this.changeTab = "切换转出情况";
this.lineChartTitle = ‘‘,
this.lineChartYAxisName = ‘Kg‘,
this.lineChartLegendData = [‘测转入‘],
this.lineChartXAxisData = [‘1日‘, ‘5日‘, ‘9日‘, ‘13日‘, ‘17日‘, ‘21日‘, ‘25日‘, ‘29日‘],
this.lineChartSeriesData = [{
name: ‘测转入‘,
type: ‘line‘,
data: [220, 182, 191, 234, 290, 360, 310, 290]
}],
this.chart1 = {
chartSeriesData: [{
value: 2.86,
name: ‘转入0.5号细针管‘
},
{
value: 20,
name: ‘转入0.6号细针管‘
}
]
}
this.drawLine(‘lineChart‘, this.lineChartTitle, ‘60px‘, this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
this.drawPie("pieChart", this.chart1.chartSeriesData);
}
},
//绘制线性图
drawLine(id, titleName, gridData, yAxisName, legendData, xAxisData, seriesData) {
// this.charts =this.echarts.init(document.getElementById(id));
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
title: {
text: titleName,
x: ‘center‘
},
tooltip: {
trigger: ‘axis‘
},
legend: {
bottom: ‘5px‘,
data: legendData,
},
grid: {
left: ‘3%‘,
right: ‘4%‘,
bottom: gridData,
top: ‘60px‘,
containLabel: true
},
xAxis: {
type: ‘category‘,
boundaryGap: false,
data: xAxisData,
},
yAxis: {
type: ‘value‘,
name: yAxisName,
},
series: seriesData
})
},
//绘制环形图表
drawPie(id, chartSeriesData) {
// this.charts =this.echarts.init(document.getElementById(id));
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
show: false,
trigger: ‘item‘,
formatter: "{a} <br/>{b} : {c} ({d}%) "
},
legend: {
orient: ‘vertical‘,
x: ‘left‘,
data: [‘0.5号细针管‘, ‘0.6号细针管‘]
},
series: [{
type: ‘pie‘,
itemStyle: {
normal: {
label: {
formatter: "{b}\n({d}%) "
}
}
},
label: {
normal: {
show: false,
position: ‘center‘
},
emphasis: {
label: {
formatter: ‘{b}: {d}‘
},
show: true,
textStyle: {
fontSize: ‘12‘,
fontWeight: ‘bold‘
}
}
},
labelLine: {
normal: {
show: false
}
},
avoidLabelOverlap: false,
radius: [‘50%‘, ‘75%‘],
center: [‘50%‘, ‘55%‘],
data: chartSeriesData
}]
})
}
},
created() {
},
//调用
mounted() {
this.$nextTick(function() {
this.drawLine(‘lineChart‘, this.lineChartTitle, ‘60px‘, this.lineChartYAxisName,
this.lineChartLegendData, this.lineChartXAxisData,
this.lineChartSeriesData);
this.drawPie("pieChart", this.chart1.chartSeriesData);
});
}
}
</script>
以上是关于vue2.0之echarts使用的主要内容，如果未能解决你的问题，请参考以下文章
使用的是vue2.0，请问.vue文件中如何使用echarts