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 ...
随机推荐
- java框架常见的面试题
1.谈谈你对MVC的理解 MVC是Model—View—Controler的简称.即模型—视图—控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开. MVC中的模型.视图.控制器 ...
- Xcode 常用命令
一些自己在开发过程中总结的命令,并不是完整的,会不断的更新. 1.图片转png格式 sips -s format png start.jpg --out StartBg.png 转换时,先cd 当前图 ...
- django项目mysql中文编码问题
在做django+mysql项目的时候,遇到中文报错问题. 问题分析:是由于mysql数据库,字符集的问题 在cmd命令行模式进入mysql mysql -uroot -p以root身份进入mysql ...
- spring对JDBC的整合支持
参考网址:https://blog.csdn.net/u013821825/article/details/51606171 springMVC,目前用到的jar包 spring IOC 5个包 + ...
- linux 小笔记
//强杀pid2306的进程 kill -9 2306 //查看80端口占用情况 lsof -i :80 //杀死mysql的所有进程 sudo killall mysqld //关闭占用80端口的所 ...
- JavaScript原型规则和实例
var arr = [] // var arr = new Array() var obj = {} // var obj = new Object() function fn() {} // var ...
- leetCodeReorderList链表合并
原题 Given a singly linked list L: L0?L1?-?Ln-1?Ln, reorder it to: L0?Ln?L1?Ln-1?L2?Ln-2?- You must do ...
- html5-css边框全
/*div{ width: 500px; height: 300px; background: rgb(122,30,60); border: 10px solid black ...
- Robot - 1. robot framework环境搭建
Fom:https://www.cnblogs.com/puresoul/p/3854963.html 一. robot framework环境搭建: 官网:http://robotframework ...
- 【Linux学习八】脚本编程
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 一.多层bash#.和source都是当前bash [root@nod ...