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的后管系统（配置篇）
一些项目依赖package.json { "name": "frontend", "description": "tssp bas ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
随机推荐
- 从零开始一起学习SLAM | 相机成像模型
上一篇文章<从零开始一起学习SLAM | 为啥需要李群与李代数?>以小白和师兄的对话展开,受到了很多读者的好评.本文继续采用对话的方式来学习一下相机成像模型,这个是SLAM中极其重要的内容 ...
- FZU 1683 纪念SlingShot(矩阵水)
纪念SlingShot [题目链接]纪念SlingShot [题目类型]矩阵水 &题解: 这代码调了十多分钟,结果是Mul没返回值,好zz啊. 令sum(n)=sum(n-1)+f(n) 那么 ...
- MyBatis基础入门《二》Select查询
MyBatis基础入门<二>Select查询 使用MySQL数据库,创建表: SET NAMES utf8mb4; ; -- ---------------------------- -- ...
- java 连接redis 以及基本操作
一.首先下载安装redis 二.项目搭建 1.搭建一个maven 工程 2. 在pom.xml文件的dependencies节点下增加如下内容: <!-- resis --> <de ...
- 学习笔记<2>Android基本四大组件
<1>Activity(活动) ------与用户交互的界面 (1)Activity启动基本流程 <2>service(服务) <3>ContentProvider ...
- 《大话设计模式》c++实现 建造者模式
一.UML图 关键词:Subject维护一个Observer列表,Subject执行Notify()时就执行列表中的每个Observer的Update(). 二.概念 观察者模式:定义了一种一对多的依 ...
- 针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法
首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!importan ...
- html5-相对定位
*{ margin: 0px; padding: 0px;}div{ width: 300px; height: 300px;}#div1{ background: rg ...
- jQuery文档操作--empty()和remove()
empty() 概述 删除匹配的元素集合中所有的子节点 <!DOCTYPE html> <html> <head> <meta charset="U ...
- jQuery选择器--selector1,selector2,selectorN和ancestor descendant
selector1,selector2,selectorN 概述 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内 参数 selector1 ...