1.png
这段时间一直在做数据可视化（PC和移动端的），使用的图表是百度的Echarts，遇到一些问题，在这里记录一下。
首先还是放下官网地址：http://echarts.baidu.com/index.html
PC端：
1.通过官网API教程入门，这是必不可少的。按照指示进到下载页面
2.png
使用方法也是通过script标签引入，结果报错：echarts is not defined，当时自己下载的是常用版本，然后换成了精简版、压缩版，都报错，一直到换成完整版才解决，百度了一下，找到了一篇解释的文章https://www.cnblogs.com/nununu/p/7839813.html，是版本的问题！对于压缩版的echarts2.2.7及以上版本，是包含了esl的，所以直接像官网一样<script src="echarts.min.js"></script>引入到页面即可，但是如果是没有压缩的版本，就需要另外引入esl.js才可以使用。
2.设置环形图表，中间显示总数
4.png
通过设置图表的title，并设置位置来实现
title: {
text: '总故障',
textStyle:{
color:'#8E8E8E',
fontSize:15,
},
subtext: '20000.00次',
subtextStyle:{
color:'#333',
fontSize:20,
},
x: 'center',
y: 'center',
},
3.设置环形数据间隔，通过设置series中的itemStyle来实现
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
//圆心偏移
// center: ['40%', '50%'],
avoidLabelOverlap: false,
// selectedMode: 'single',
itemStyle: {
normal: {
//数据间隔
borderColor: "#FFFFFF",
borderWidth: 2,
}
},
}
······
移动端：
![]()
3.png
3.png
因为移动端通过npm安装的，所以没有遇到PC端引入的问题。使用的时候通过设置为vue对象的原型就好
import Vue from 'vue'
import echarts from 'echarts'
import MintUI from 'mint-ui'
// import 'mint-ui/lib/style.css'
import App from './App'
Vue.use(MintUI);
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
let myChart = this.$echarts.init(document.getElementById('myChart'));
myChart.setOption({});
1.设置图表的宽高，必须在dom元素上通过行内元素设置才有效，通过class或者id设置均无效
<div id="myChart4" :style="{width: '100%', height: '300px',marginTop: '1rem'}"></div>
2.图表的Y轴标数过大时会超出容器，通过设置grid解决，具体代码
grid: {
left: '0%', //距离左边的距离
right: '0%', //距离右边的距离
bottom: '3%', //距离底部的距离
containLabel: true //用于『防止标签溢出』的场景
},
3.图表不会随宽度变化而改变，通过重新设定图表宽度解决
let revenueChart1 = document.getElementById('revenueChart');
//自适应宽
let myChartContainer = function () {
revenueChart1.style.width = window.innerWidth + 'px';
};
//生成图表前调用
myChartContainer();
//绘制图表
let revenueChart = this.$echarts.init(revenueChart1);
revenueChart.setOption({});
//浏览器大小改变时重置大小
window.onresize = function () {
myChartContainer();
revenueChart.resize();
};
目前未解决的问题：
1.折线图横向分割线没办法设置成虚线，如图
5.png
按照API的说明，设置了Y轴上的splitLine的type，但是无效，不知道是不是自己写的不对，目前还在找解决方法。
yAxis: {
axisLine: {
show: false,
},
splitLine: {
show: true,
color:'#ccc',
width:1,
type: 'dashed',
},
type: 'value',
},
另外吐槽一句，感觉Echarts的API说明很多东西解释的太官方了，不太容易懂（个人观点，不喜勿喷）。项目还没做完，如遇新问题会继续补充。
----------END-------------
补充1：环形图表因数据值太小导致影响交互
补充1-1
添加
minAngle设置环形块的最小宽度，从而使指示线不会重叠在一起
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
minAngle:'5',
itemStyle: {
normal: {
//数据间隔
borderColor: "#FFFFFF",
borderWidth: 2,
}
},
······
补充1-2
补充2:改变数据的排序方式
在data数组后面加上sort(function (a, b) { return a.value - b.value; })排序就可以了，根据需要改变a-b还是b-a
补充2-1.png
data:[
{value:49, name:'直接访问'},
{value:48, name:'邮件营销'},
{value:1, name:'联盟广告'},
{value:1, name:'视频广告'},
{value:1, name:'搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),
补充2-2.png
补充2:看到了一篇比较实用的echarts文章，放在这里，有遇到相关问题的可以去看看# ECharts对象的数据实例化方法汇总以及注意事项
补充3：tooltip过宽导致超出屏幕并且无法显示数据
补充3-1.png
在tooltip里设置extraCssText（额外附加到浮层的 css 样式）即可
tooltip: {
show:true,
trigger: 'axis',
extraCssText:'width:120px;height:80px;background:rgba(0,0,0,0.6);',
},
补充3-2.png
补充4：柱状图或者折线图坐标轴刻度设置为虚线---解决了之前留下的问题
只需要在yAxis中设置标线
yAxis: {
type: 'value',
name:'人数（个）',
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
补充4-1.png
补充5:echarts的叠堆折线图数据出现坐标和值对不上的问题
原因：多条折线图时，如果stack属性都是一样的，就会出现Y轴叠加的问题
原代码
series: [
{
name: 'PV',
type: 'line',
symbol: 'circle',//折线点设置为实心点
symbolSize: 6, //折线点的大小
stack: '总量',
data: seriesData.pv_line_data
},
{
name: 'UV',
type: 'line',
symbol: 'circle',//折线点设置为实心点
symbolSize: 6, //折线点的大小
stack: '总量',
data: seriesData.uv_line_data
}
]
解决：将stack值修改或直接去掉就好了，做法看项目需要
series: [
{
name: 'PV',
type: 'line',
symbol: 'circle',//折线点设置为实心点
symbolSize: 6, //折线点的大小
//stack: '总量',
data: seriesData.pv_line_data
},
{
name: 'UV',
type: 'line',
symbol: 'circle',//折线点设置为实心点
symbolSize: 6, //折线点的大小
//stack: '总量',
data: seriesData.uv_line_data
}
]
补充5-2.png
补充6:饼图或仪表盘偏上或偏下，设置grid无效
解决：在series中设置center属性
补充6-1.png
原代码：
series: [
{
name: '昨日环比增长率',
type: 'gauge',
min: -100, // 最小值
max: 100, // 最大值
radius: '100%',
startAngle: 205,
endAngle: -25,
pointer: { // 指针设置
length: '60%',
width: 6
},
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.5, '#FF0076'], [1, '#0075FE']],
width: 20
}
},
splitLine: { // 分割线样式（及10、20等长线样式）
length : 12
},
axisTick: { // 刻度线样式（及短线样式）
length : 5
},
axisLabel: { // 文字样式（及“10”、“20”等文字样式）
color : "#fff",
distance : 10 // 文字离表盘的距离
},
detail: {
formatter: '{value}%',
padding: [-40, 0, 0, 0],
textStyle: { // 其余属性默认使用全局文本样式
fontSize: '24',
color: '#fff'
}
},
data: [{value: 40}]
}
]
修改后代码：
series: [
{
name: '昨日环比增长率',
type: 'gauge',
center:['50%','66%'], //通过设置Center调整图表位置
min: -100, // 最小值
max: 100, // 最大值
radius: '100%',
startAngle: 205,
endAngle: -25,
pointer: { // 指针设置
length: '60%',
width: 6
},
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.5, '#FF0076'], [1, '#0075FE']],
width: 20
}
},
splitLine: { // 分割线样式（及10、20等长线样式）
length : 12
},
axisTick: { // 刻度线样式（及短线样式）
length : 5
},
axisLabel: { // 文字样式（及“10”、“20”等文字样式）
color : "#fff",
distance : 10 // 文字离表盘的距离
},
detail: {
formatter: '{value}%',
padding: [-40, 0, 0, 0],
textStyle: { // 其余属性默认使用全局文本样式
fontSize: '24',
color: '#fff'
}
},
data: [{value: 40}]
}
]
补充6-2.png
补充7:柱形图给柱形及对应Y轴文字设置不同颜色
补充7-1.png
原代码：
xAxis: {
show: false
},
yAxis: {
type: 'category',
boundaryGap: false,
data: ['其它', '酒店客管', '高铁/火车站', '政务大厅', '医院', '汽车站', '飞机场'],
axisLabel: {
fontSize: 14,
textStyle: { // 设置刻度文字颜色
color: '#fff'
},
},
axisTick: {
show: false
},
splitLine: { //去掉分割线
show: false,
lineStyle: {
color: '#eeeeee'
}
},
axisLine: { // 隐藏刻度线
show: false
},
},
series: [
{
type: 'bar',
barWidth: 15,
label: {
show: true,
position: 'right'
},
data: [193255, 23438, 31000, 121594, 134141, 681807, 456135]
}
]
修改代码：
yAxis: {
type: 'category',
boundaryGap: false,
data: ['其它', '酒店客管', '高铁/火车站', '政务大厅', '医院', '汽车站', '飞机场'],
axisLabel: {
fontSize: 14,
textStyle: { // 设置刻度文字颜色
color: function(params,index) {
let colorList = ['#F757FF', '#6551E8', '#FF0076', '#00D120', '#FEB800', '#00E4D3', '#0075FF'];
return colorList[index];
}
},
},
axisTick: {
show: false
},
splitLine: { //去掉分割线
show: false,
lineStyle: {
color: '#eeeeee'
}
},
axisLine: { // 隐藏刻度线
show: false
},
},
series: [
{
type: 'bar',
barWidth: 15,
label: {
show: true,
position: 'right'
},
itemStyle: {
normal: { // 设置每根柱形的颜色
color: function(params) {
let colorList= ['#F757FF', '#6551E8', '#FF0076', '#00D120', '#FEB800', '#00E4D3', '#0075FF'];
return colorList[params.dataIndex];
}
}
},
data: [193255, 23438, 31000, 121594, 134141, 681807, 456135]
}
]
补充7-2.png
补充8:记一次热力分布图代码，需要下载china.js文件，并附上自己找到的一个基于echarts的大数据可视化模板
option = {
title: {
text: '全国分布热点图',
subtext: '',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'normal'
},
},
tooltip : {
formatter: function(obj) {
return `${obj.data.name}:${obj.data.number}`
}
},
geo: {
show: true,
type: 'map',
map: 'china',
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#097bba'
},
emphasis: {
areaColor: '#2B91B7'
}
}
},
//配置属性
series: [{
name: '分布地点',
type: 'effectScatter',
legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
coordinateSystem: 'geo',
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,0,0.8)'
}
},
data: [
{"name": "台湾","value": [121.509062, 25.044332],number: 2000, symbolSize: 10},
{"name": "河北", "value": [114.502461, 38.045474], number: 2000,},
{"name": "山西", "value": [112.549248, 37.857014, 95]},
{"name": "内蒙古", "value": [111.670801, 40.818311, 72]},
{"name": "辽宁", "value": [123.429096, 41.796767, 18]},
{"name": "吉林", "value": [125.3245, 43.886841, 35]},
{"name": "黑龙江", "value": [126.642464, 45.756967, 35]},
{"name": "江苏", "value": [118.767413, 32.041544, 60]},
{"name": "浙江", "value": [120.153576, 30.287459, 13]},
{"name": "安徽", "value": [117.283042, 31.86119, 15]},
{"name": "福建", "value": [119.306239, 26.075302, 80]},
{"name": "江西", "value": [115.892151, 28.676493, 33]},
{"name": "山东", "value": [117.000923, 36.675807, 18]},
{"name": "河南", "value": [113.665412, 34.757975, 24]},
{"name": "湖北", "value": [114.298572, 30.584355, 21]},
{"name": "湖南", "value": [112.982279, 28.19409, 81]},
{"name": "广东", "value": [113.280637, 23.125178, 37]},
{"name": "广西", "value": [108.320004, 22.82402, 51]},
{"name": "海南", "value": [110.33119, 20.031971, 61]},
{"name": "四川", "value": [104.065735, 30.659462, 85]},
{"name": "贵州", "value": [106.713478, 26.578343, 19]},
{"name": "云南", "value": [102.712251, 25.040609, 32]},
{"name": "西藏", "value": [91.132212, 29.660361, 41]},
{"name": "陕西", "value": [108.948024, 34.263161, 66]},
{"name": "甘肃", "value": [103.823557, 36.058039, 62]},
{"name": "青海", "value": [101.778916, 36.623178, 102]},
{"name": "宁夏", "value": [106.278179, 38.46637, 33]},
{"name": "新疆", "value": [87.617733, 43.792818, 29]},
{"name": "北京", "value": [116.405285, 39.904989, 44]},
{"name": "天津", "value": [117.190182, 39.125596, 58]},
{"name": "上海", "value": [121.472644, 31.231706, 31]},
{"name": "重庆", "value": [106.504962, 29.533155, 24]},
{"name": "香港", "value": [114.173355, 22.320048, 39]},
{"name": "澳门", "value": [113.54909, 22.198951, 28]}
]
}]
}
补充8-1.png
补充9:记一次图表设置背景及设置折现渐变
yAxis: {
type: 'value',
splitLine: {
show: true,
width: 1,
lineStyle:{
type: 'solid',
color:'rgba(61,126,255, .08)', // 分割线颜色
}
},
splitArea: {
show: true,
areaStyle: {
color: 'rgba(247,251,255,1)', // 背景颜色
}
},
},
series: [{
type: 'line',
symbol: 'none', //这个配置
symbolSize: 2, //这个值设置成线的粗细
itemStyle : {
normal : {
color:'#00FF00',
lineStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0084FF' // 0% 处的颜色
}, {
offset: 1, color: '#00BAFF' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
},
}]
补充9-1.png
补充10:记设置半环形图表
补充10-1
//计算data中value的总和---重点
let a = 0;
let seriesData = series.data;
for (let i = 0, len = seriesData.length; i < len; i++) {
a += seriesData[i].value;
}
//添加新的元素到data中，并设置其颜色样式为背景色（当前背景为白色）---重点
series.data.push({
value: a,
name: "",
itemStyle: { normal: { color: "rgba(0,0,0,0)" } },
});
let option = {
// color: this.baseOption.colorList,
// grid: this.baseOption.grid,
tooltip: {
trigger: "item",
formatter: function (item) {
let total = 0;
let dataList = data.series.data;
for (let i = 0; i < dataList.length; i++) {
total += dataList[i].value;
}
let arr = [
`${item.name}:${item.value}(${(
(item.value / total) *
100
).toFixed(2)}%)`,
];
return arr.join(" ");
},
},
legend: {
top: "5%",
left: "center",
icon: "circle", // 变为小圆点
},
series: [
{
name: series.name,
type: "pie",
radius: ["50%", "80%"],
center: ["50%", "90%"],
startAngle: 180, // 设置数据开始角度---重点
hoverAnimation: false,
label: {
show: true,
position: "outside",
formatter: '{b}:{c}({d}%)', // 设置引导数据
},
labelLine: {
normal: {
show: false, // 隐藏引导线
},
},
data: series.data,
},
],
};
