Echarts使用总结（一）
Vue中引入Echarts安装：npm install echarts -Svue页面中，如果是V5.0之前的版本，引入的方式：import echarts from 'echarts'如果是V5.0之后的版本，页面中的引入方式：import * as echarts from 'echarts'引入echarts的theme:require('echarts/theme/macarons') /
·
Vue中引入Echarts
安装：
npm install echarts -Svue页面中，如果是V5.0之前的版本，引入的方式：
import echarts from 'echarts'如果是V5.0之后的版本，页面中的引入方式：
import * as echarts from 'echarts'引入echarts的theme:
require('echarts/theme/macarons') // echarts theme具体使用，图标初始化放在mounted中，不能放在created中（此时dom还没初始化），为防止重复init多次图表，可以在创建前判断对象是否null，为null时再创建。
mounted() {
this.$nextTick(() => {
const chart = echarts.init(document.getElementById('contentEnt'), 'macarons')//第二个参数是theme
chart.setOption(option)
})
}
Vue中的图表切换显示
使用v-if自己没有到达效果，转而使用v-show。
使用v-show可能会出现echarts图表显示不全或宽高不正确的情况。需要将setOption()使用如下：
this.$nextTick(() => {
const option = {}
thisChart.setOption(option)
});Vue中使用地图
通过如下网址生成自选的地区js文件。
可以将davav的json文件导入到下面的网址进行编辑：
以内蒙古为例：
生成neimenggu.js文件拷贝到项目中。
页面中引入：
import '@/utils/neimenggu'如果是json文件：
const nm = await import('@/utils/region/nm.json')
echarts.registerMap('内蒙古', nm)option配置：
geo: { // 地理坐标系组件用于地图的绘制
map: '内蒙古', // 写入具体的地区，如果是全国，就是china
roam: false, // 是否开启鼠标缩放和平移漫游
aspectScale: 1, // 长宽比
zoom: 1.25, // 当前视角的缩放比例（地图的放大比例）
// top:20,
label: {
show: true,
color: '#f2f2f2', // 文字颜色
fontSize: 16
},
itemStyle: { // 地图区域的多边形 图形样式。
normal: {
areaColor: { //渐变色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(43, 196, 243, 0.42)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(43, 196, 243, 0.42)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
// areaColor: 'rgba(43, 196, 243, 0.42)',
borderColor: 'rgba(43, 196, 243, 1)',
borderWidth: 3,
shadowColor: '#CFCFCF', //阴影
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 5
},
emphasis: { //hover 颜色
areaColor: '#2B91B7'
}
},
regions: []
},
series: [
{
// name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
type: 'map',
mapType: 'neimenggu', //全国是china
geoIndex: 0,
label: {
show: true
},
data: []
}
]
}显示map:
thisChart = echarts.init(document.getElementById('contentmap'))
thisChart.clear()
thisChart.setOption(thisOption)定时切换map背景色：
that.timerObj.mapTimer = setInterval(function() {
const option = JSON.parse(JSON.stringify(thisOption))
if (that.colorType === '0') {
that.colorType = '1'
option.geo.itemStyle.normal.areaColor.colorStops = [{
offset: 0, color: 'rgba(43, 196, 243, 0.72)' // 0% 处的颜色
}, {
offset: 0.1, color: 'rgba(43, 196, 243, 0)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(43, 196, 243, 0.52)' // 100% 处的颜色
}]
option.geo.itemStyle.normal.borderColor = 'rgba(43, 196, 243, 1)'
} else if (that.colorType === '1') {
that.colorType = '2'
option.geo.itemStyle.normal.areaColor.colorStops = [{
offset: 0, color: 'rgba(170,216,243, 0.72)' // 0% 处的颜色
}, {
offset: 0.2, color: 'rgba(170,216,243, 0)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(170,216,243, 0.42)' // 100% 处的颜色
}]
option.geo.itemStyle.normal.borderColor = 'rgba(170,216,243, 1)'
} else if (that.colorType === '2') {
that.colorType = '0'
option.geo.itemStyle.normal.areaColor.colorStops = [{
offset: 0, color: 'rgba(181,244,195, 0.72)' // 0% 处的颜色
}, {
offset: 0.3, color: 'rgba(181,244,195, 0)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(181,244,195, 0.42)' // 100% 处的颜色
}]
option.geo.itemStyle.normal.borderColor = 'rgba(181,244,195, 1)'
}
thisChart.clear()
thisChart.setOption(option)
}, 2000)设置点击改变区块背景色:
thisChart.on('click', function(param) {
// 清除定时变色
that.clearInterval(that.mapTimer)
const option = JSON.parse(JSON.stringify(echartsOptions.mapOption))
option.geo.regions.push({
name: param.name, // 区块名称
itemStyle: {
normal: {
areaColor: 'rgba(7,35,143, 0.72)',
borderWidth: 3,
borderColor: '#ffffff'
}
},
emphasis: { // 也是选中样式
areaColor: '#07238F'
},
label: {
show: true,
color: '#ffffff', // 文字颜色
fontSize: 18,
fontWeight: 'bold'
}
})
thisChart.clear() // 没有clear 就会出现颜色黄色
thisChart.setOption(option)
})hover某个区块显示自定义内容，在option中添加如下：
option={
tooltip: { // 鼠标移到图里面的浮动提示框
textStyle : {
color: 'white',
decoration: 'none',
//fontFamily: 'Verdana, sans-serif',
fontSize: 14,
//fontStyle: 'italic',
fontWeight: 'bold'
},
// formatter详细配置：
formatter:function (params, ticket, callback) {
var value = params.data.items;
var name = params.name;
if(Array.isArray(value)){ // 鼠标移到涟漪点上不显示浮层
return '';
}
if(value === undefined){ // 鼠标移到路线上不显示浮层
return '';
}
var htmlStr = '<div style="font-size:16px;">'+name+'</div>'+value;
return htmlStr;
}
// backgroundColor:"#ff7f50",//提示标签背景颜色
// textStyle:{color:"#fff"} //提示标签字体颜色
}
option.series[0].data = [{'name':'地区名称','item':'展示内容'}];//对应到series的type:map
}切换区县地图：
thisChart.on('click', async function(param) {
const s = await visuUtil.mapFileName[param.name]
// 获取地区信息
that.changeData(param.name)
})
const mapFileName = {
'内蒙古': import('./region/neimenggu'),
'呼和浩特市': import('./region/150000/150100'),
'包头市': import('./region/150000/150200'),
'乌海市': import('./region/150000/150300'),
'赤峰市': import('./region/150000/150400'),
'通辽市': import('./region/150000/150500'),
'鄂尔多斯市': import('./region/150000/150600'),
'呼伦贝尔市': import('./region/150000/150700'),
'巴彦淖尔市': import('./region/150000/150800'),
'乌兰察布市': import('./region/150000/150900'),
'兴安盟': import('./region/150000/152200'),
'锡林郭勒盟': import('./region/150000/152500'),
'阿拉善盟': import('./region/150000/152900')
}自定义显示坐标：
county = {countyName:'',longitude:'',latitude:''} //经纬度坐标
let series = { // 文字和地点涟漪效果
// name: item[0] + ' Top10',
type: 'effectScatter',//scatter 是个原点，effectScatter是特效圆点
coordinateSystem: 'geo',
// geoIndex: 0,
zlevel: 2,
rippleEffect: {
// 涟漪特效
period: 2, // 特效动画时长
scale: 3, // 波纹的最大缩放比例
brushType: 'stroke' // 波纹的绘制方式：stroke | fill
},
label: {
emphasis: { // 有这一层为鼠标移入涟漪点才显示文字，去掉这一层那么直接显示文字再地图上
position: 'right',
color:"#ffffff",
show: true,
padding: [8, 8, 8, 8],
//fontWeight:'bold',
backgroundColor:"#253E4E",
borderColor:"#000", //边框颜色
borderWidth:0, //柱条的描边宽度，默认不描边。
borderType:"solid",
//shadowBlur:10, //图形阴影的模糊大小。
shadowColor:"#253E4E", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离。
opacity:0.7,
lineHeight:18,
formatter:function (params, ticket, callback) { //接收的是empjasis.data的数据，记住formatter如果被JSON.stringify()将失效，需要重新赋值
var data = params.data.data;
var name = params.name;
if(Array.isArray(data)){ // 鼠标移到涟漪点上不显示浮层
return '';
}
if(value === undefined){ // 鼠标移到路线上不显示浮层
return '';
}
var htmlStr = '{a|'+name+'}\n';
var items = "";
items += '{b|'+'AP在线: 12 '+'}\n';
items += '{c|'+'AP离线: 2 '+'}\n';
items += '{d|'+'人员数: 5 '+'}';
htmlStr = htmlStr+ items;
return htmlStr;
},
rich:{
a:{
color:'#fff',
fontSize:18,
fontWeight: 'bold',
lineHeight:30
},
b:{
color:'green',
lineHeight:20
},
c:{
color:'grey',
lineHeight:20
},
d:{
color:'yellow',
lineHeight:20
}
}
}
},
symbolSize: 6,
itemStyle: { // 涟漪相关颜色
normal: {
color: color[i],
label:{
textStyle: {
fontSize: 14
}
}
}
// color: color[i]
},
data: county.map(function (dataItem) {
return {
name: dataItem.countyName,
value: [dataItem.longitude, dataItem.latitude] //传入坐标,
data: '' //要显示的数据
}
})
}
option.series[1] = series
配置随页面大小变动
window.addEventListener('resize', function() {
thisChart.resize()
})如果pie类型radius属性设置不是百分比，而是值类型，则resize无效。
图形字体根据页面整体大小调整
首先要设置dom的fontSize:
const resizePage = function() {
(function(doc, win) {
const docEl = doc.documentElement
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
const recalc = function() {
const clientWidth = docEl.clientWidth
if (!clientWidth) return
if (clientWidth < 1300) {
docEl.style.fontSize = 11 + 'px'
} else {
docEl.style.fontSize = parseInt(clientWidth / 700) + 14 + 'px'
}
// docEl.style.fontSize = parseFloat(clientWidth / 1900) + 'rem'
}
if (!doc.addEventListener) return
recalc()
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
}然后更新图表的文字：
const reLoadDocument = function() {
const documentFontSize = (document.documentElement.style.fontSize).replace('px', '')
const defaultFontSize = parseInt(documentFontSize * 0.8)
const mapFontSize = parseInt(documentFontSize * 1)
mapOption.geo.label.fontSize = mapFontSize
pieAreaOption.legend.textStyle.fontSize = defaultFontSize
}定时切换显示tooltips:
visuUtil.clearInterval(that.timerObj.approvalTimer)
that.timerObj.approvalTimer = setInterval(function() {
var dataLen = option.xAxis[0].data.length
thisChart.currentIndex = (thisChart.currentIndex + 1) % dataLen
// 高亮当前图形
thisChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: thisChart.currentIndex
})
// 展示提示
thisChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: thisChart.currentIndex
})
}, 2300)在页面关闭时清除定时器：
visuUtil.clearInterval(that.timerObj.mapTimer)
const clearInterval = function(obj) {
if (obj != null) {
window.clearInterval(obj)
obj = null
}
}实现柱状图上叠加图形：
其实就是：bar+pictorialBar。
{
name: "数据上椭圆",
type: 'pictorialBar',
colorBy: 'data',
symbol: 'image://url',
symbolOffset: [0, 70], //通过定时器修改这个数值可以实现symbol的动画效果
symbolPosition: 'end',
z: 12,
label: {
show: true,
position: "top",
fontSize: 14,
color: 'inherit'
},
data: [100,105],
},
{
type: 'bar',
barGap: '10%',
barCateGoryGap: '10%',
itemStyle: {
color: "rgba(22, 168, 194,.7)"
},
data: [100,105]
}
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)