A. Vue中使用ECharts,根据父级DIV及窗口自适应图表,数据驱动图表
方法,使用ECharts自带API (resize)配合VUE自定义轮询命令饥败饥
一、模板部分
二、js部烂返分
三、Vue自定义枯晌轮询命令v-resize
希望对需要使用ECharts图表的同志有所帮助.
也希望各位大佬提出我的不足,感谢
B. Vue+Echarts 实现自定义折线图组件
网上Vue结合Echarts使用的例子少之又少，而且数据都写好在组件内且不可复用
本文基于 Vue.js高仿饿了么外卖App ，在商家页面添加一个简易的可交互的平滑折线图
Chrome调试模拟手机端操作效果：
</br>
我将拆分为两个部分，标题和三个选择框写在当前页面seller.vue中，将配置折线图的样式都写在父组件seller.vue里，折线图则抽象化为可复用的组件。
</br>
模拟一份JSON格式的 折线图xy坐标轴数据 chartData ，其中分了日、周、月这三组数据。
** data.json：**
</br>
在 webpack 的 dev-sever.js 中读取模拟好的 chartData 数据，然后新增个接口apiRoutes，当服务端收到请求以后，返回给客户端 chartData
** dev-sever.js：**
</br>
Hello.vue向服务器请求并获取 chartData
Hello.vue：
</br>
seller.vue 中写好标题和三个选择框的样式
props 接收从 Hello.vue 传来的xy坐标轴数据 chartData
传入 chart.vue 将要接收的数据，impData 为 chartData 中的一组数据，setData 为自定义折线图样式的数据。
select(type) 方法是点击选择框高亮，并把 impData 赋值为 chartData 中对应的一组数据
** seller.vue ：**
</br>
chart.vue组件中
prop 接收父组件 seller.vue 的传来的 impChartData 和 setChartData
watch 观察 impChartData 数据的变化，因为父组件点击选择框会改变传入的数据，这里相应的改变数据，并渲染新的折线图
drawLine(xData, yData, xAxisColor, lineColor, grid) 是绘制折线图样式的主体，我提取出了五个属性值作为参数，
分别是x坐标轴数据、y坐标轴数据、x坐标轴指示器的颜色、折线线条的颜色、直角坐标系内绘图网格，
分别获取自 this.impChartData.xData、 this.impChartData.yData、 this.setChartData.xAxisColor、 this.setChartData.lineColor、 this.setChartData.grid
Echarts的 配置项 很多，如果想自定义更加个性化的样式，比如多条折线、两个x轴坐标，都可以设置为参数。
GitHub 上已经有达人做了几张图的基本模板 v-charts ，很方便就是可配置项比较少。
chart.vue：
</br>
参考文档：
Echarts 配置项
C. vue使用Echarts4.X及5.0版本坑
之前的项目中一直用的是4.7.0及4.8.0版本的Echarts。引入的方式无非是全局引入和按需引入两种
main.js中颂兆引入
按需引入新建个李烂myecharts.js
后来，新建了个项目，由于没有装Echarts就重新cnpm install echarts -S
写页面的时候无论如何柱状图表也出不来。对比了下原来是版本不一样，新项目装上了5.0版本。
研究了半天才找见是版本的问题。怎么解决呢。要不降级
要不改引入方哪樱漏法，因为之前的方法引入不可用了，echarts的源码变了，不再支持“从'echarts/lib/echarts'导入echarts”，改用“import*as echarts from'echarts/lib/echarts'”
好了。记录下自己的踩坑之旅。
D. 使用的是vue2.0，请问.vue文件中如何使用echarts
main.js
import echarts from "echarts"
A.vue
HTML
<div id="charts">
<div id="main" :style="{width:'600px',height:'400px'}"></div>
</div>
javascript
export default{
data (){
return {
msg:"123"
}
},
mounted (){
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
E. 在vue中 echarts 柱状图调后台接口
1.安装echarts依赖
npm install echarts -S 或cnpm install echarts -S
2.全局引用
// main.js引入echarts
import echarts from 'echarts' //有时语法报错 或使用 import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.创建组件
<template>
<div id="echarts">
<div >
<div>
<div id="myChart" :style="{ width: 骰px', height: 馄px' }"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getarrival } from '@/api/proct' //调用后台接口
export default {
name: 'Echarts',
data() {
return {
dataList: [],
obj:{
id:1
}
}
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
getarrival(this.obj).then((res) => {
this.dataList = res.data.data.arrivel_later_result.bar //接口返回数据罩散赋值物老氏this.dataList
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: this.dataList.title.text,
subtext: this.dataList.title.subtext,
left: this.dataList.title.left
},
grid: {
left: Ɖ%',
right: Ɗ%',
bottom: Ɖ%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: this.dataList.xAxis.data
},
yAxis: {
type: 'value'
// boundaryGap: [0, 0.01]
},
series: [
{
name: '迟到占比',
type: 'bar',
barWidth: 30, //柱图宽度
data: this.dataList.series[0].data
}
]
})
})
},
}
}
</script>
<style scoped>
</style>
4.效含肢果实现
F. 在vue 中使用百度echarts
前言：在vue2.0中使用 网络echarts 有三种解决方案。
这样每次都要获取图表dom元素 然后通过setOption渲染数据，最后在mounted中初始化枣明。很麻烦。
vue-echarts 是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0 + 开发，依赖 Vue.js v2.2.6 +，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻档岩厅松使用echarts的所用功能。。。
v-charts 是基于vue2二次封装的图表组件行隐库，功能没有echarts多 但也够用了，官网很详细，这里用一个官网例子说明问题。
以上，可跟据需求选用，如果需求简单可直接用 v-charts
G. vue.js中使用echarts实现数据动态刷新功能
在vue使用echarts时，可能会遇到这样的问题，就是数据变化时，echarts不更新
这是因为Echarts是数据驱动的，这意味着只要我们重新设置数据，那么图表就会随之重新渲染
如果想要支持数据的自动刷新，必然需要一个监听信洞拦器能够实时监听到数据滑胡的变化然后告知Echarts重新设置数颤蔽据。
Vue提供了“watch”：
H. 在Vue中使用echarts
由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒誉李省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~
我的示例是在vue-cli搭建
首先需要全局引入
在main.js中
在Echarts.vue中
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中
这样一个简单的图表就完成了，是不是庆如迟觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何操作？
由于全局引入会将所有的echarts图表打包，导致体积过大
在Echarts.vue文件中
使用 require 而不是 import
基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。
从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便
vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。
下面是一个我自己对echarts进行的一个简单的vue组件的集成。
在echarts中
子组件：
props部分是我接收到的参数，父组件获取数据分发橡搭，data是父组件分发给echarts的数据源。
父组件：
如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~
I. 使用的是vue2.0，请问.vue文件中如何使用echarts
main.js
import echarts from "echarts"
A.vueHTML
<div id="charts">
<div id="main" :style="{width:'600px',height:'400px'}"></div>
</div>
javascript
export default{
data (){
return {
msg:"123"
}
},
mounted (){
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: { text: 'ECharts 入门示例裤颤基' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫"洞大,"裤子","高跟鞋胡谨","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
J. 在vue里面引入echarts（柱状图，饼图，折线图））
1.安装echarts
npm install echarts -S
2.在main.js中引用echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.封装chart组件(复制粘贴就好了)
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="bar" style="width: 600px;height:400px;"></div>
<div id="pie" style="width: 600px;height:400px;"></div>
<div id="line"并兆 style="width: 600px;height:400px;"></div>
在script里面写下面内容
export default{
mounted(){
this.drawLine();//调用这个方法
},
methods:{
drawLine () {
var echarts = require('echarts');
var barChart = echarts.init(document.getElementById('bar'));
var pieChart = echarts.init(document.getElementById('pie'));
var lineChart = echarts.init(document.getElementById('line'));
barChart.setOption({
title: {
text: '行闹柱状图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["肉夹馍", "馒头", "豆沙包", "粉丝汤", "豆包", "油条"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
pieChart.setOption({
title: {
text: '饼图'
},
series: [{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data: [ // 数据数组，name 为数据项名称，value 为数据项值
{
value: 235,
name: '视频广告'
},
{
value: 274,
name: '联盟广告'
},
{
value: 310,
name: '邮件营销'
},
{
value: 335,
name: '直接访问'
},
{
value: 400,
name: '搜索引擎'
}
]
}]
});
lineChart.setOption({
title: {
text: '折线图',
},
tooltip: {},
legend: {
data: ['销量', '试穿', '退货档蔽罩'],
x: 'right'
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}, {
name: '试穿',
type: 'line',
data: [30, 40, 50, 20, 12, 30]
}, {
name: '退货',
type: 'line',
data: [1, 2, 1, 3, 5, 2]
}]
});
}
}
}