image.png
vue-echarts插件
vue-echarts是vue封装过的，更符合vue开发习惯。
1.先npm安装echarts和vue-echarts
npm install echarts vue-echarts
2.引入
按需引入
// main.js
// 引入vue-echarts组件库
import ECharts from 'vue-echarts'
// 注册组件后即可使用
Vue.component('chart', ECharts)
在组件中使用echarts
// 按需引入需要的组件模块
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
然后就可以在<template>中使用
<template>
<div>
<chart :options="options" :auto-resize="true"></chart>
</div>
</template></pre>
3.编译
Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，如果你正在使用官方的 Vue CLI 来创建项目，可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置：
当使用 Vue CLI 3+ 时，需要在 vue.config.js 中的 transpileDependencies 增加 vue-echarts 及 resize-detector，如下：
// vue.config.js
module.exports = {
transpileDependencies: [
'vue-echarts',
'resize-detector'
]
}
当使用 Vue CLI 2 的 webpack 模板时，需要按下述的方式修改 build/webpack.base.conf.js：
// build/webpack.base.conf.js
{
test: /\.js$/,
loader: 'babel-loader',
- include: [resolve('src'), resolve('test')]
+ include: [
+ resolve('src'),
+ resolve('test'),
+ resolve('node_modules/vue-echarts'),
+ resolve('node_modules/resize-detector')
+ ]
}
4.使用
<template>
<div class="hello">
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
orgOptions: {},
}
},
computed: {
...mapState(['somedata']),
},
mounted() {
this.orgOptions = {
dataset: {
source: this.somedata, // 一般是异步请求数据填充
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
}
}
</script>
5.引入vue-echarts报错问题解决:
报错：
vue-echarts报错.png
解决方法
vue-echarts报错解决.png
使用 dataset 管理数据
使用 dataset 管理数据
ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：
option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
}
现在，ECharts 4 提供了 数据集（dataset）组件来单独声明数据，它带来了这些效果：
option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
image.png
或者也可以使用常见的对象数组的格式：
option = {
legend: {},
tooltip: {},
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，
// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
// 完成映射，参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
更多内容查看文档。
formatter格式化内容
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
borderWidth: 1,
textStyle: {
color: '#5C5C5C',
fontSize: 10
},
axisPointer: {
type: 'line',
lineStyle: {
color: '#D0021B'
}
},
formatter: function (params) {
console.log(params);
var res=''
for(var i=0;i<params.length;i++){
res+='<p>'+params[i].seriesName+' '+params[i].data+ '人'+'</p>'
}
return res;
}
},
生成地图
引进相关文件
import ECharts from "echarts";
import "echarts/lib/chart/map";
import "echarts/lib/component/visualMap";
import hubeiMap from "../data/map-hubei.json"; // 相关地区的数据
import "../data/map-hubei.js"; // 要引入相关区域的js文件
相关地区的js和json文件在node_module/echarts/map文件夹下面。
registerMap注册地图
<template>
<div class="mapWrapper">
<chart ref="map" :options="mapOptions" :auto-resize="true"></chart>
</div>
</template>
mounted() {
this.getMapData()
ECharts.registerMap("hubei", hubeiMap);
this.mapOptions = {
backgroundColor: "#fbf8f9",
dataset: {
source: this.hubeiData,
},
tooltip: {
trigger: "item",
},
visualMap: {
show: true,
type: "piecewise",
min: 0,
max: 99999,
align: "left",
top: 10,
right: 10,
// right: "auto",
inRange: {
color: ["#ffffff","#FFF2CF", "#FDD29F", "#FF8B71", "#E64B45", "#BD1417", "#7F1100"]
},
pieces: [
{min: 200},
{min: 100, max: 199},
{min: 10, max: 99},
{min: 1, max: 9},
{min: 0, max: 0},
],
padding: 5,
// "inverse": false,
// "splitNumber": 5,
orient: "vertical", // horizontal：水平，vertical：垂直
showLabel: true,
// text: ["高", "低"],
itemWidth: 10, // 每个小块的宽度
itemHeight: 10,
itemGap: 8,
itemSymbol: "circle",
textStyle: {
fontSize: 12
},
formatter: function (min, max) {
const unit = '人'
if (min == 0) {
return `无${unit}`
} else if (min == 200) {
return `大于${min}${unit}`
} else {
return `${min}-${max}${unit}`
}
}
// "borderWidth": 0
},
series: [
{
left: "center",
// top: '15%',
// bottom: 5,
type: "map",
name: "人数",
silent: false, // 不响应和触发鼠标事件
label: {
show: true,
position: ["20%", "80%"], // 地图中心点相对容器的位置（x, y）
// margin: 8,
}
},
tooltip: {},
layoutCenter: ['50%', '63%'],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: "80%",
mapType: "湖北",
// data: [ ],
zoom: 1.1,
roam: false,
showLegendSymbol: false,
emphasis: {},
rippleEffect: {
show: true,
brushType: 'stroke',
scale: 4.5,
period: 4
}
}
]
};
}
封装组件时防止图表没有赋值成功
// 子组件
props: {
numTrendency: {
type: Object,
default(){
return{
echarts_data_x: ['0:00', '1:00', '2:00','3:00', '4:00'],
echarts_data_y: [5, 10, 20, 20,30,80,50,60,20,10,0]
}
}
}
},
mounted() {
this.drawLine()
},
// 父组件
// html
<analyse-chart v-if="flag" :numTrendency="numTrendency"></analyse-chart>
// js
analyse().then(res=>{
this.numTrendency = res.data
this.falg = true // 异步请求数据成功之后再显示子组件，防止子组件显示数据为空
})
网友评论