Echarts的使用
1、引入echarts文件，vue中直接可以下载引入（npm i echarts --s）
2、echarts初始化
//在main.js中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
绘制图表
myChart.setOption(option);
// 折线图设置
option={
// title是标题组件，包含主标题和副标题 legend 图例组件
tooltip: {
//tooltip提示框组件
//trigger 触发类型 item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
//axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
trigger: 'axis',
axisPointer: {
//坐标轴指示器配置项 type指示器类型 'cross' 十字准星指示器
type: 'cross',
//坐标轴指示器的文本标签 样式设置
label: {
backgroundColor: '#6a7985'
}
},
textStyle: {
// 提示框浮层的文本样式
fontSize: '30'
}
},
grid: {
//直角坐标系在容器中的位置 containLabel：grid 区域是否包含坐标轴的刻度标签
left: '1.25%',
right: '1.25%',
bottom: '25%',
containLabel: true
},
xAxis: [
//x轴设置
{
type: 'category', //坐标轴类型
boundaryGap: true,//坐标轴两边留白策略
data: ['2019-04-08', '2019-04-09', '2019-04-10', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08'], //坐标轴类型
axisLine: { //坐标轴轴线相关设置
show: false
},
axisTick: { //坐标轴刻度相关设置 interval:坐标刻度间隔 inside：坐标刻度朝向
show: false
},
axisLabel: { //坐标轴刻度标签的相关设置 interval:坐标刻度标签间隔 inside：坐标刻度标签朝向 样式设置
fontFamily: 'HYQiHei-EES',
// 20px
fontSize: '24',
color: '#485157',
align: 'center',
interval: 1,
margin: 45,
rotate: -25
},
splitLine: { //坐标轴在 grid 区域中的分隔线
show: true,
lineStyle: { color: 'rgba(80,243,237,0.1)' } //分隔线颜色
},
splitArea: { show: false } //坐标轴在 grid 区域中的分隔区域
}
],
yAxis: [
{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontFamily: 'HYQiHei-EES',
// 20px
fontSize: '24',
color: '#485157',
align: 'center',
inside: true
},
splitLine: { show: false },
splitArea: { show: false }
}
],
series: [
{
// 系列数据 symbol： 图标
name: '累计节油（L）',
type: 'line',
symbol: 'image://img/save_petrol@3x.png',
symbolSize: [21, 33],
showSymbol: false,
itemStyle: { //折线拐点标志的样式
color: 'rgba(0,122,255,0.3)'
},
lineStyle: { color: 'rgba(0,122,255,1)' }, //线条样式
stack: '总量',
areaStyle: {},
data: [0.32, 0.23, 0.4, 0.5, 0.46, 0.6, 0.35, 0.45, 0.35, 0.55, 0.35, 0.55, 0.6,0.32, 0.23, 0.4, 0.5, 0.46, 0.6, 0.35, 0.45, 0.35, 0.55, 0.35, 0.55, 0.6, 0.35, 0.45,0.35, 0.45,]
//data: oil
},
{
name: '累计减排（Kg）',
type: 'line',
symbol: 'image://img/reduce_exhuast@3x.png',
symbolSize: [21, 33],
showSymbol: false,
itemStyle: {
color: 'rgba(10,234,212,0.2)'
},
lineStyle: { color: 'rgba(10,234,212,1)' },
stack: '总量',
areaStyle: { normal: {} },
// data: [0.12, 0.23, 0.2, 0.32, 0.5, 0.5, 0.25, 0.35, 0.15, 0.35, 0.15, 0.35, 0.5,0.32, 0.23, 0.4, 0.5, 0.46, 0.6, 0.35, 0.45, 0.35, 0.55, 0.35, 0.55, 0.6, 0.35, 0.45,0.35, 0.45,]
data: cumulative
}
]
}
// 饼图设置
option={
tooltip: {
show: false
},
toolbox: {
show: false
},
// color : ['#3dd4de','#b697cd','#a6f08f'],
backgroundColor: 'transparent',
series: [{
name: 'Pie1',
type: 'pie',
clockWise: false,
radius: ['75%', '98%'], //设置饼图 内外半径
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
shadowColor: 'rgba(40, 40, 40, 0.5)'
}
},
hoverAnimation: false,
center: ['50%', '50%'],
data: [{
value: data1, // 要显示的数据
label: { //单个扇区的标签配置
normal: {
formatter: '{d}%', //文本的显示的内容
position: 'center',
show: true,
textStyle: {
//样式
fontSize: '114',
fontFamily: 'HYQiHei-GES',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: { //图形样式
normal: {
color: color
// shadowColor: color,
// shadowBlur: 4
}
}
},
{
value: remaining, // 剩下占比 的显示
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(148,170,186,.6)', // 未完成的圆环的颜色
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: { // 高亮样式
// color: 'rgba(44,59,70,.3)' // 未完成的圆环的颜色
}
}
}]
}]
}
ecahrts引入中国地图
优点：只绘制中国地图，设置每个区块的颜色，提供经纬度可以在图上设置图标
缺点：放大并不能像图吧和百度地图自动缩放到市、县、镇等。不能获取地图的经纬度位置，不能使用到地图的api
-
引入中国地图数据 china.js
-
设置options 的配置 设置地理坐标系组件 geo
myChart.setOption({ tooltip: { show: false }, geo: { map: 'china', roam: true, //是否开启鼠标缩放和平移漫游 label: { position: ['50%', '50%'], normal: { show: true, textStyle: { color: '#485157', fontSize: '30' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 1)' //设置边界线 }, emphasis: { areaColor: 'rgba(35,193,227,0.6)', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, 'data': data }, series: [ // { 自己设置图标 // type: 'scatter', // coordinateSystem: 'geo', // data: this.cityNumber, // data: cityNumber, // symbolSize: (value, params) => { // if (value[2] > 0 && value[2] <= 10) { // params.symbolSize = [52, 52] // } else if (value[2] > 10 && value[2] <= 100) { // params.symbolSize = [62, 62] // } else if (value[2] > 100 && value[2] <= 1000) { // params.symbolSize = [79, 79] // } else if (value[2] > 1000 && value[2] <= 10000) { // params.symbolSize = [89, 89] // } else if (value[2] > 10000) { // params.symbolSize = [114, 114] // } // return params.symbolSize // }, // symbol: 'image://http://localhost:8080/img/52_09.png', // label: { // normal: { // formatter: '{@[2]}', // position: 'inside', // show: true, // color: '#fff', // fontSize: '14' // }, // emphasis: { // show: true // } // } // }, { //组件提供的涟漪 有动态效果 type: 'effectScatter', coordinateSystem: 'geo', data: this.cityNumber, //图上标注的数据 symbolSize: (value, params) => { if (value[2] > 0 && value[2] <= 10) { params.symbolSize = [60, 60] } else if (value[2] > 10 && value[2] <= 100) { params.symbolSize = [66, 66] } else if (value[2] > 100 && value[2] <= 1000) { params.symbolSize = [72, 72] } else if (value[2] > 1000 && value[2] <= 10000) { params.symbolSize = [90, 90] } else if (value[2] > 10000) { params.symbolSize = [120, 120] } return params.symbolSize }, showEffectOn: 'render', //配置何时显示特效 render 绘制完就显示 rippleEffect: { //涟漪特效相关配置 动画 缩放大小 brushType: 'fill' //波纹的绘制方式 "stroke" 'fill' }, hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果 label: { normal: { formatter: '{@[2]}', //文本显示设置 position: 'inside', show: true, color: '#fff', fontSize: '24' }, emphasis: { show: true } }, itemStyle: { normal: { // color: '#008cff', color: 'rgba(35,193,227,1)' // shadowBlur: 10, // shadowColor: '#333' } } }, { name: '中国', type: 'map', geoIndex: 0, 'mapType': 'china', data: data //地图的数据 对应颜色 // tooltip: {show: false}, } ] })百度地图
优点：可以和echarts一起使用调底色，提供API，可以获取地理位置和在地图上做标记。
缺点：只能设置底色，但显示区域、放大比例不好调整（不会只显示中国地图，包含边界其他的城市、海，显示效果不好、突兀）
使用：
- 申请密钥，百度地图使用一个专门的密钥(ak)作为路径
在vue框架，的index.html中引入
<body>
<div id="app"></div>
<!--引入百度地图API-->
<script src='http://api.map.baidu.com/api?v=2.0&ak=？&callback=init'></script>
</body>
2、在使用的vue页面中的myChart.setOption({option}）
// 引入bmap.js
import '../../../node_modules/echarts/extension/bmap/bmap.js'
// options中设置bmap
bmap: {
center: [105.65,37.76],
zoom: 7,
roam: true,
mapStyle: {
styleJson: [{}]}
}
图吧地图
优点：提供API，可以获取地理位置和在地图上做标记。有后台端口匹配的数据
缺点：样式不能修改，显示很突兀
大屏总结
投放在大屏并不是将页面分辨率直接投放，它只能显示电脑屏幕显示的内容，再将其内容放大，但电脑分辨率和大屏分辨率比例不一致，很容易导致图案变形。
在修改大屏样式是将页面设置为浏览器的100%，再通过百分百进行布局，同时保证大屏图案比例显示正常。
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
