在vue项目中简单封装了几种echart图形 柱状图 饼图 词云 吉林省地图
graph.js中引入echarts
import echarts from 'echarts'main.js
import echart from 'utils/graph'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.prototype.$http = axios
Vue.prototype.$echart = echart
Vue.config.productionTip = false注意事项：
1，如果echarts 绘制的时候div为隐藏状态 会出现canvas width：300px height 150px的情况 出现这种情况重新绘制一下就可以了，
setTimeout(() => {
this.topChartList[flag].lineBar.resize()
})2， 更新每次查询的数据 可以先使用getOption()获取 然后再重新设置data
let newO = this.mapE.getOption()
newO.series[0].data = this.newMapList
this.mapE.setOption(newO)1. 带折线柱状图 pxtoVh为页面适配的像素
initLineBar(dom, pxToVh, dataList, time) {
let lData = [time]
if (!dataList.yd2.length == 0) {
lData.push('增长率')
}
let myChart = echarts.init(dom)
let option = {
grid: {
left: '8%',
right: '6%',
top: '10%',
bottom: '10%'
},
title: {
show: false
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: lData,
right: '3%',
top: '0',
itemWidth: pxToVh * 0.81,
itemHeight: pxToVh * 0.81,
textStyle: {
color: '#5A6271',
fontSize: pxToVh * 0.88
}
},
toolbox: {
show: false
},
xAxis: [
{
type: 'category',
boundaryGap: true,
show: true,
axisTick: {
show: false
},
axisLabel: {
fontSize: pxToVh * 0.81,
color: '#5A6271',
margin: 8,
interval: 0,
data: dataList.xd
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#EAEAEC', //左边线的颜色
width: '1' //坐标线的宽度
}
},
data: dataList.xd
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '',
axisLine: {
show: false
},
splitNum: 6,
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#EAEAEC'
}
},
axisLabel: {
fontSize: pxToVh * 0.81,
color: '#5A6271',
margin: 12
},
min: 0,
boundaryGap: [0.2, 0.2]
},
{
type: 'value',
scale: true,
axisLine: {
show: false
},
splitNum: 6,
axisTick: {
show: false
},
axisLabel: {
fontSize: pxToVh * 0.81,
color: '#5A6271',
margin: 12,
formatter: '{value} %'
},
splitLine: {
show: false,
lineStyle: {
// 使用深浅的间隔色
color: '#EAEAEC'
}
},
name: '',
// max: 30,
// min: 0,
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name: lData[0],
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#FFFFFF'
},
fontSize: pxToVh * 0.81,
padding: [0, pxToVh * 0.51],
backgroundColor: {
image: '/static/img/tooltip_num_bg.png'
},
formatter: function(params) {
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {
if (option.xAxis[0].data[i] == params.name) {
// var val1 = params.value || 0
let val2 = option.series[0].data[i] || 0
return `{a|${val2}}`
}
}
},
rich: {
a: {
height: pxToVh * 2.01,
color: '#fff'
}
}
}
},
itemStyle: {
normal: {
zlevel: 2,
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#78B0CF'
// 0% 处的颜色
},
{
offset: 1,
// 100% 处的颜色
color: '#92DCF3'
}
],
false
)
}
},
barWidth: pxToVh * 1.54,
yAxisIndex: 0,
data: dataList.yd1
},
{
name: '增长率',
yAxisIndex: 1,
symbol: 'circle',
symbolSize: pxToVh * 0.59,
smooth: true,
color: '#FA8C16',
label: {
normal: {
show: false,
position: 'top',
textStyle: {
color: '#FA8C16'
}
}
},
lineStyle: {
color: '#FA8C16'
},
type: 'line',
data: dataList.yd2
}
]
}
myChart.setOption(option)
return myChart
},页面调用
initLineBar(refId, list, time) {
let refI = refId ? refId : 'lineBar'
let reff = this.$refs[refI]
if (reff) {
console.log(list)
return this.$echart.initLineBar(reff[0], this.pxTovh, list, time)
}
},数据格式
this.lineBarTotal = {
yd1: [
10758,
3975,
2980,
1831,
2122,
3018,
3525,
1729,
2764,
380,
3988,
2333,
3596,
453,
365
],
yd2: [28, 4.4, 5.9, 0.9, 0.7, 1.1, 2.1, 0.4, 1.9, 3.8, 1.6],
xd: [
'省本级',
'长春市',
'吉林市',
'四平市',
'辽源市',
'通化市',
'白山市',
'松原市',
'白城市',
'延边市',
'长白山管委会'
]
}
2. 饼图 可以设置每一项的最小角度 防止字体重叠
initPie(dom, pxToVh, dataList) {
let myChart = echarts.init(dom)
let option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true,
color: [
'#073E67',
'#074879',
'#0F5081',
'#07548C',
'#2671A5',
'#2671A5',
'#A0EAFF',
'#74DFFF',
'#56CDF0',
'#56CDF0',
'#3FACF7'
],
series: [
{
name: '主题分布',
type: 'pie',
radius: ['20%', '45%'],
minAngle: 10,
startAngle: 90,
label: {
normal: {
show: true,
formatter: '{b}',
fontSize: pxToVh * 0.81,
color: '#7D8B9B'
//, '{b|{d}% {c}件}'
// formatter: ['{a|{b}}'].join('\n'),
// rich: {
// a: {
// color: '#7D8B9B',
// fontSize: pxToVh * 0.81
// }
// // b: {
// // color: '#394351',
// // fontSize: pxToVh * 0.81
// // }
// }
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
lineStyle: {
color: '#75C8F6'
}
}
},
data: dataList
}
]
}
myChart.setOption(option)
return myChart
},页面调用
initPie(refId, list) {
let refI = refId ? refId : 'pie'
let reff = this.$refs[refI]
if (reff) {
return this.$echart.initPie(reff[0], this.pxTovh, list)
}
},数据格式
this.pieTotal = [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' },
{ value: 335, name: '直接访问2' },
{ value: 310, name: '邮件营销2' },
{ value: 234, name: '联盟广告2' },
{ value: 135, name: '视频广告2' },
{ value: 1548, name: '搜索引擎2' }
]
3. 词云 词云需要先单独引用一下 require('echarts-wordcloud')
initWorldCloud(dom, pxToVh, dataList) {
console.log(pxToVh, dataList)
let chart = echarts.init(dom)
chart.setOption({
tooltip: { show: false },
series: [
{
type: 'wordCloud',
gridSize: pxToVh * 0.88,
sizeRange: [pxToVh * 0.88, pxToVh * 2.2],
rotationRange: [0, 0],
shape: 'rectangle',
width: '100%',
height: '100%',
drawOutOfBound: true,
textStyle: {
normal: {
color: function() {
return ['#B3B5B6', '#404448'][Math.round(Math.random())]
}
}
},
data: dataList
}
]
})
return chart
},页面调用
initWorldCloud(refId, list) {
let refI = refId ? refId : 'wordCloud'
let reff = this.$refs[refI]
if (reff) {
return this.$echart.initWorldCloud(reff[0], this.pxTovh, list)
}
},数据结构
this.wordCloud = [
{
name: '物业管理',
value: 10000
},
{
name: '占道停车',
value: 6181
},
{
name: '公交车、出租车管理',
value: 4386
},
{
name: '油烟扰民',
value: 4055
},
{
name: '扬尘污染',
value: 2467
},
{
name: '道路、桥梁、隔离栏的维护',
value: 2244
},
{
name: '噪声分贝测试',
value: 1898
},
{
name: '违章搭建',
value: 1484
},
{
name: '环境卫生综合整治',
value: 1112
}
]
4.地图
我这里做的是吉林省地图， 地图需要先引入json 这里可以直接引入 echart自带的json 但是可能并不满足自己的需求， 那么可以引入自己的json 。 使用了两种格式json都可以显示出来图形， 第一种为外层带id（实际就是地区的areacode） 第二种再里层写的， 如果后台接口返回的市级名称跟json中对不上 ， 那么可以修改json文件的name 跟后台接口对应上了就可。
"properties": {
"adcode": "220600",
"center": { "lat": 41.942505, "lng": 126.427839 },
"cp": [126.784728, 41.939629],
"level": "city",
"name": "白山市",
"parent": {
"adcode": "220000",
"center": {
"coordinates": [125.3245, 43.886841],
"crs": {
"properties": { "name": "urn:ogc:def:crs:EPSG:6.3:4326" },
"type": "name"
},
"type": "Point"
},
"level": "province",
"name": "吉林省"
},
"telecode": "0439"
},代码与数据结构
import 'echarts/map/js/province/jilin.js'
// import obj2 from 'echarts/map/json/province/jilin.json'
// console.log(obj2)
const nameP = 'jilin'
import obj from 'json/myjilin.json'
console.log(obj)
// console.log(JSON.stringify(obj2.features[2]))
echarts.registerMap(nameP, obj)initMap(dom, pxToVh, dataList) {
console.log(dataList)
let myChart = echarts.init(dom)
let option = {
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name + '</br>案件数 : ' + params.value
}
},
visualMap: {
min: 0,
max: 999999999,
left: 'left',
top: 'bottom',
showLabel: !0,
show: !0,
pieces: [
{ min: 1000, color: '#BF242A', label: '>1000' },
{ min: 501, max: 1000, color: '#CD5459', label: '501-1000' },
{ min: 301, max: 500, color: '#DC878A', label: '301-500' },
{ min: 101, max: 300, color: '#EAB7B9', label: '101-300' },
{ min: 0, max: 100, color: '#F3D7D9', label: '0-100' }
]
// color: ['#eeeeee', '#db7037']
},
series: [
{
type: 'map',
map: nameP,
label: {
normal: {
show: true
}
},
emphasis: {
color: 'auto'
},
aspectScale: 1,
zoom: 1.2,
data: dataList
// data: [
// {
// name: '长春市',
// value: 0
// },
// {
// name: '吉林市',
// value: 0
// },
// {
// name: '长白山管委会',
// value: 0
// },
// {
// name: '白城市',
// value: 0
// },
// {
// name: '松原市',
// value: 0
// },
// {
// name: '延边州',
// value: 0
// },
// {
// name: '四平市',
// value: 0
// },
// {
// name: '白山市',
// value: 0
// },
// {
// name: '辽源市',
// value: 0
// },
// {
// name: '通化市',
// value: 0
// },
// {
// name: '省本级',
// value: 0
// }
// ]
}
]
}
myChart.setOption(option)
return myChart
}页面调用
if (this.mapE) {
console.log(this.mapE.getOption(), 'option')
let newO = this.mapE.getOption()
console.log(this.newMapList)
newO.series[0].data = this.newMapList
this.mapE.setOption(newO)
} else {
this.mapE = this.initMap('map', this.pxTovh, this.newMapList)
}
initMap(refId, list) {
let refI = refId ? refId : 'map'
let reff = this.$refs[refI]
if (reff) {
return this.$echart.initMap(reff, this.pxTovh, list)
}
},
外层带id 格式json
{
"id": "220500",
"properties": {
"cp": [125.936501, 41.721177],
"name": "通化市",
"childNum": 1
}
}内层带id 格式json
两种格式主要差别在geometry.coordinates
一种是"@@GDC@GDCAKFGAGEMCGECEBECE]E@EAGBGEE@IIKMC@CBGI@GG@CFG@EBI@
另一种[123.3325,44.0662],[ 123.5852,44.0881], [ 123.6401,44.0771 ], 两种格式不能混用 否则图形显示不出来
{
"type": "Feature",
"properties": {
"id": "2203",
"name": "四平市",
"cp": [
124.541,
43.4894
],
"childNum": 5
},
}文章内 吉林省json
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
