Echarts配置
直接引入echarts
安装echarts项目依赖
cnpm install echarts --save
//或者
cnpm i echarts -S
全局引入
我们安装完成之后，可以在 main.js 中全局引入 echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
创建图表
<template>
<div id="app">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
export default {
name: "app",
methods: {
drawChart() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
let option = {
title: {
text: "ECharts 入门示例"
},
tooltip: {},
legend: {
data: ["销量"]
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [, , , , , ]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
mounted() {
this.drawChart();
}
};
</script>
//实际获取总的Gpu数据
getGpuData() {
if (!Utils.checkToken(this)) return;
if (this.begin_date === null) {
this.begin_date = new Date("2018/12/1");
}
if (this.end_date === null) {
this.end_date = new Date();
}
this.showPagination = true;
let loading = this.$loading();
this.GetGpuRealAvailiay({
search_type: this.search_type,
uid: this.uid,
gpu: this.gpu,
begin_date: Utils.formatDate(this.begin_date, "yyyy-MM-dd"),
end_date: Utils.formatDate(this.end_date, "yyyy-MM-dd")
}).then(
res => {
res=res.body
loading.close();
this.totalData = res;
this.drawChart(this.totalData.data);
const idx = res.date.length - ;
this.time_date = res.date[idx];
this.avage_ratio = res.data[idx];
this.getOneGpu();
},
err => {
this.$message.error(err.msg);
}
);
}, //实际画图
drawChart() {
const This = this;
let mChart_line1 = This.$echarts.init(document.getElementById("mChart_line"));
mChart_line1.setOption(
lineOptions.line({
option_type: ,
yName: This.yName,
yData: This.total_data.data,
tName: This.total_data.tName,
xName: "时间",
xData: This.total_data.date,
title: "GPU Test",
Unit: This.Unit
})
);
mChart_line1.getZr().off("click");
mChart_line1.getZr().on("click", params => {
const pointInPixel = [params.offsetX, params.offsetY];
if (mChart_line1.containPixel({ seriesIndex: [] }, pointInPixel)) {
//判断给定的点是否在指定的坐标系或者系列上
let xIndex = mChart_line1.convertFromPixel({ seriesIndex: }, [
//转换像素坐标值到逻辑坐标系上的点
params.offsetX,
params.offsetY
])[]; /*事件处理代码书写位置*/
This.day =
This.date_type === "month"
? This.total_data.date[xIndex] + "-01"
: This.total_data.date[xIndex];
This.showPagination = false;
This.getDayData();
}
});
}
折线图.js
export default {
/**
* 折线图
* xData x轴
* yData y轴
* xName x轴名字
* title 标题
*/
line(param) {
var xData = param.xData;
var data = param.yData
let option = [];
let num =param.num ? param.num : ;
let max = num ? num * : ; //处理精度丢失问题 但不是最佳方案
let startValue = param.startValue;
option[] = {
// Make gradient line here
visualMap: [{
show: false,
type: 'continuous',
seriesIndex: ,
dimension: ,
min: ,
max: xData.length -
}],
title: [{
top: '',
left: 'center',
text: param.title
}],
tooltip: {
trigger: 'axis',
formatter: function(params){
var text_Unit ='';
for(var i = ;i < params.length;i++){
text_Unit += params[i].value + param.Unit + "</br>"
}
return params[].name + "</br>" + text_Unit;
}
},
xAxis: [{
data: xData,
gridIndex: ,
}],
yAxis: [{
name: param.yName,
splitLine: { show: false },
gridIndex: ,
}],
grid: [{
bottom: '',
}, {
top: '20%',
}],
series: [{
type: 'line',
showSymbol: false,
data: data
}]
};
option[] = {
title: {
text: param.title,
x: 'center',
y: '10px',
textStyle: {
fontSize: ,
color: '#000'
}
},
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: {
name: param.xName,
nameTextStyle: {
color: ['#000']
},
data: param.xData,
axisLabel: {
textStyle: {
color: '#000'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
z:
},
yAxis: {
name: param.yName,
nameTextStyle: {
color: ['#000']
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#000'
}
}
},
series: [{
data: param.yData,
type: 'line',
symbol: 'circle',
symbolSize: ,
lineStyle: {
normal: {
color: '#7baaf3 ',
width: ,
type: 'solid'
}
},
itemStyle: {
normal: {
color: '#7baaf3'
}
},
z:
}]
};
option[] = {
title: {
left: 'center',
text: param.title
},
tooltip: {
trigger: 'axis',
},
legend: {
right:,
data:param.tName,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
boundaryGap: false,
data:param.xData
},
yAxis: {
name: param.yName,
//splitLine: { show: false },
},
series:param.yData
}
option[] = {
title: {
text: param.title,
x: 'center',
y: '20px',
textStyle: {
fontSize: ,
color: '#000'
}
},
tooltip: {
show: true,
trigger: 'axis',
formatter: function(params){
var text_Unit ='';
for(var i = ;i < params.length;i++){
text_Unit += params[i].seriesName +'：' +params[i].value + param.Unit + "</br>"
}
return params[].name + "</br>" + text_Unit;
}
},
legend: {
right: '10px',
data: param.tName,
},
xAxis: {
name: param.xName,
nameTextStyle: {
color: ['#000']
},
data: param.xData,
axisLabel: {
textStyle: {
color: '#000'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
},
yAxis: {
name: param.yName,
nameTextStyle: {
color: ['#000']
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#000'
}
}
},
series:param.yData
};
option[] = {
title: {
text: param.title,
x: 'center',
y: '20px',
textStyle: {
fontSize: ,
color: '#000'
}
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer:{
type:"cross",
crossStyle:{
color:"#999"
}
}
},
legend: {
right: '10px',
data: param.tName,
},
xAxis: {
name: param.xName,
nameTextStyle: {
color: ['#000']
},
data: param.xData,
axisLabel: {
textStyle: {
color: '#000'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
z: ,
},
yAxis: {
name: param.yName,
nameTextStyle: {
color: ['#000']
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#000'
}
}
},
series: param.yData,
};
option[] = {
visualMap: [{
show: false,
top: ,
right: ,
default:,
pieces:[{
gt: ,
lte: num,
color: '#ffde33'
},{
gt: num,
lte: max,
color: '#f00'
}],
outOfRange: { // 超出范围
color: '#f00'
}
}],
title: [{
top: '',
left: 'center',
text: param.title,
}],
tooltip: {
trigger: 'axis',
formatter: function(params){
var text_Unit ='';
for(var i = ;i < params.length;i++){
text_Unit += params[i].value + param.Unit + "</br>"
}
return params[].name + "</br>" + text_Unit;
}
},
xAxis: [{
data: xData,
gridIndex: ,
}],
yAxis: [{
name: param.yName,
splitLine: { show: false },
gridIndex: ,
}],
grid: [{
bottom: '',
}, {
top: '20%',
}],
series: {
type: 'line',
showSymbol: false,
data: data,
markLine: {
silent: true,
data: [{
yAxis: num
},]
}
}
};
option[] = {
title: {
left: 'center',
text: param.title
},
tooltip: {
trigger: 'axis',
},
legend: {
right:,
data:param.tName,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
boundaryGap: false,
data:param.xData
},
yAxis: {
name: param.yName,
splitLine: { show: false },
},
series: []
}
option[].series.push(
{
name: '平行于y轴的趋势线',
type: 'line',
//data:[0],
markLine: {
silent: true,
data: [{
yAxis: num
}]
}
}
)
if( param.option_type == ){
for( var item in param.yData){
var obj ={
name: param.yData[item].name,
type: 'line',
color:param.yData[item].color,
data: param.yData[item].data
}
option[].series.push(obj)
}
}
option[] = {
visualMap: [{
show: false,
top: ,
right: ,
default:,
pieces:[{
gt: ,
lte: num,
color: '#ffde33'
},{
gt: num,
lte: max,
color: '#f00'
}],
outOfRange: { // 超出范围
color: '#f00'
}
}],
dataZoom: [
{
startValue:'2019-03-21',
},
{
type: 'inside',
}
],
title: [{
top: '',
left: 'center',
text: param.title,
}],
tooltip: {
trigger: 'axis',
formatter: function(params){
var text_Unit ='';
for(var i = ;i < params.length;i++){
text_Unit += params[i].value + param.Unit + "</br>"
}
return params[].name + "</br>" + text_Unit;
}
},
xAxis: [{
data: xData,
gridIndex: ,
}],
yAxis: [{
name: param.yName,
splitLine: { show: false },
gridIndex: ,
}],
grid: [{
bottom: '',
}, {
top: '20%',
}],
series: {
type: 'line',
showSymbol: false,
data: data,
markLine: {
silent: true,
data: [{
yAxis: num
},]
}
}
};
option[] = {
// Make gradient line here
visualMap: [{
show: false,
type: 'continuous',
seriesIndex: ,
dimension: ,
min: ,
max: xData.length -
}],
title: [{
top: '',
left: 'center',
text: param.title
}],
dataZoom: [
{
startValue:startValue,
},
{
type: 'inside',
}
],
tooltip: {
trigger: 'axis',
formatter: function(params){
var text_Unit ='';
for(var i = ;i < params.length;i++){
text_Unit += params[i].value + param.Unit + "</br>"
}
return params[].name + "</br>" + text_Unit;
}
},
xAxis: [{
data: xData,
gridIndex: ,
}],
yAxis: [{
name: param.yName,
splitLine: { show: false },
gridIndex: ,
}],
grid: [{
bottom: '',
}, {
top: '20%',
}],
series: [{
type: 'line',
showSymbol: false,
data: data
}]
};
option[] = {
title: {
text: param.title,
x: 'center',
y: '20px',
textStyle: {
fontSize: ,
color: '#000'
}
},
tooltip: {
show: true,
trigger: 'axis',
formatter: function(params){
var text_Unit ='';
for(var i = ;i < params.length;i++){
text_Unit += params[i].seriesName +'：' +params[i].value + param.Unit + "</br>"
}
return params[].name + "</br>" + text_Unit;
}
},
legend: {
right: '10px',
data: param.tName,
},
dataZoom: [ // 主要是这一部分，他是折线图的缩放功能的开启
{
startValue:startValue, // 起始位置
},
{
type: 'inside',
}
],
xAxis: {
name: param.xName,
nameTextStyle: {
color: ['#000']
},
data: param.xData,
axisLabel: {
textStyle: {
color: '#000'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
},
yAxis: {
name: param.yName,
nameTextStyle: {
color: ['#000']
},
axisLine: {
show: true,
lineStyle: {
color: ['#ddd']
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#000'
}
}
},
series:param.yData
};
return option[param.option_type];
}
}
饼形图.js
export default {
/**
* 饼形图
*/
pie(param) {
let option = [];
option[] = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: param.title,
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: , name: '使用' },
{ value: , name: '未使用' }
]
}
]
};
option[]={
title: {
text: param.title,
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
bottom: ,
left: 'center',
data: param.tName
},
series : [
{
type: 'pie',
radius : '65%',
center: ['50%', '50%'],
data:param.data,
itemStyle: {
emphasis: {
shadowBlur: ,
shadowOffsetX: ,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
return option[param.option_type];
}
}
中国地图.js
export default{
/**
* 地图
* title 标题
* data 数据
* mapName 地图类型
* geoCoordMap 经纬度
*/
mapOfChina(param){
var convertData = function(data) {
var res = [];
for (var i = ; i < data.length; i++) {
var geoCoord = param.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
var max = , min = ; // todo
var maxSize4Pin = , minSize4Pin = ;
// 秋雁南飞：
// 此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
// 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
// 当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
// http://echarts.baidu.com/option.html#series-map.geoIndex
// 并且加了pin气泡图标以示数值大小
// 全局变量区:参考江西绿色金融（谢谢：本来想用闭包实现接口数据调用，没时间了）
// 本图作者：参考秋雁南飞的《投票统计》一图，网址：http://gallery.echartsjs.com/editor.html?c=xrJU-aE-LG
var nameColor = "rgb(55, 75, 113)"
var name_fontFamily = '等线'
var name_fontSize = ;
var maxNum = param.data.sort(function(a, b) {
return b.value - a.value;
}).slice(, )[].value;
var one,two,three,four;
param.data.sort(function(a, b) {
return b.value - a.value;
}).map((x,index)=>{
if(index===){
one = x.value;
}
if(index===){
two = x.value;
}
if(index===){
three = x.value;
}
if(index===){
four = x.value;
}
})
let option = {
title: {
text: param.title,
x: 'center',
y:,
textStyle: {
color: nameColor,
fontFamily: name_fontFamily,
fontSize: name_fontSize
}
},
tooltip: {
trigger: 'item',
formatter:function(params) {
var toolTiphtml = '';
for(var i = ;i<param.data.length;i++){
if(params.name==param.data[i].name){
toolTiphtml += (param.data[i].name+':'+param.data[i].value+'人')
}
}
return toolTiphtml;
}
},
// visualMap:
// {
// show: true,
// min: 0,
// max: maxNum,
// left: 'left',
// bottom:100,
// text: ['高', '低'], // 文本，默认为数值文本
// calculable: true,
// seriesIndex: [1],
// inRange: {
// color: ['#f1f1f1','#c3e5ff','#0aa4dd','#1b57bc']
// }
// },
/*工具按钮组*/
toolbox: {
show: true,
orient: 'vertical',
right: ,
top: 'center',
itemGap:,
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {},
myTool1: {
show: true,
title: param.startRoam?'关闭缩放':'开启缩放',
icon: 'path://M444.58034998 309.80516673c9.31358834 0 17.26276527 3.29732647 23.82775732 9.78816585 6.61937049 6.68857977 9.89197942 14.51911231 9.89197942 23.89202248v67.35543407h67.42958671c9.31358834 0 17.23310436 3.2923831 23.84753146 9.98590696 6.56004866 6.59465294 9.87714932 14.5240564 9.8771486 23.79315231 0 9.26909662-3.31710066 17.30231363-9.8771486 23.79315228-6.61442712 6.58970958-14.53394314 9.88703605-23.84753146 9.88703679h-67.42958671v67.45430425c0 9.26909662-3.27260892 17.20344271-9.89692351 23.89696658-6.56004866 6.48589603-14.50922558 9.88703605-23.82281323 9.88703605-9.29875753 0-17.26276527-3.40114076-23.82281391-9.88703605-6.62431458-6.69846723-9.8969235-14.62786996-9.89692351-23.89696658V478.30003747h-67.42958671c-9.31358834 0-17.23310436-3.29732647-23.84258739-9.88703679-6.56004866-6.49083938-9.87714932-14.5240564-9.87714933-23.79315228 0-9.26909662 3.31215729-17.20344271 9.87714933-23.79315231 6.60948377-6.69352312 14.53394314-9.98590625 23.84258739-9.98590696h67.42958671V343.48535506c0-9.37291018 3.27755228-17.20344271 9.89692351-23.89696584 6.56004866-6.48589603 14.5240564-9.7832225 23.82775729-9.7832225z m0-101.13449333c-31.96973123 0-62.47618159 6.17939726-91.63305129 18.63706342-29.15686974 12.4626088-54.24522418 29.25079657-75.32932853 50.36456256-21.0593868 21.0099517-37.81791365 46.14279787-50.31512745 75.28978014-12.45272208 29.14203892-18.69144189 59.73252936-18.69144189 91.65776888s6.23871981 62.51572995 18.69144189 91.66271223c12.4972138 29.04316872 29.25079657 54.17107153 50.31512745 75.28483752 21.08410434 21.0099517 46.17245879 37.79813946 75.32932853 50.25580489a230.69915857 230.69915857 0 0 0 91.63305129 18.74582036 230.6645543 230.6645543 0 0 0 91.63305134-18.74087699c29.16675646-12.4626088 54.25016755-29.25079657 75.32932852-50.26074826 21.06433088-21.11376599 37.83274374-46.24166806 50.29535255-75.28978089 12.47249626-29.14203892 18.71121607-59.73252936 18.71121606-91.65776886s-6.23871981-62.51572995-18.71121606-91.66271223c-12.4626088-29.14203892-29.23102238-54.2748851-50.29535255-75.28483679-21.07916097-21.1088219-46.15762871-37.89700965-75.32932852-50.3596192-29.15686974-12.4626088-59.65343262-18.64200679-91.63305134-18.64200678z m0-67.45924762c41.10535267 0 80.3568863 8.03321702 117.84852773 24.09965034 37.47186724 16.06643404 69.70360479 37.59051161 96.76936601 64.67604774 27.06081786 26.98666522 48.58489543 59.22334684 64.631556 96.71004418 16.03677241 37.48669734 24.09965033 76.72340087 24.09965034 117.8188668 0 35.32638027-5.74436812 69.11038289-17.22816027 101.44593473-11.51839716 32.23173827-27.88144177 61.5863484-49.13856968 87.84631578l191.43279413 191.25482792c6.52050031 6.49083938 9.74367413 14.42024212 9.74367412 23.89696658 0 9.67940821-3.20339964 17.71262524-9.60031219 24.19852126-6.41668674 6.38702511-14.43507293 9.58053802-24.08976361 9.58053801-9.48661118 0-17.4901673-3.29732647-23.96617585-9.78816587l-191.2103362-191.45256829c-26.32423404 21.31644973-55.65412661 37.69432517-87.94518671 49.12373886-32.2910601 11.53817134-66.07011937 17.30231363-101.36683799 17.30231363-41.0806351 0-80.38654793-8.03321702-117.83369762-24.09965105-37.46197978-16.06643404-69.7184356-37.69432517-96.77431008-64.67604703-27.04598776-27.09047876-48.59478289-59.22334684-64.64144203-96.71004417C149.2545795 524.95201713 141.23619257 485.61150076 141.21147503 444.51603484c-0.01977419-40.98670828 8.02332956-80.33216873 24.09965105-117.8188668 16.06643404-37.38782714 37.63500335-69.72337897 64.64144203-96.71004418 27.02621357-27.0855354 59.27278195-48.60961371 96.77431008-64.67604774C364.22346298 149.343513 403.49971416 141.21142578 444.56057582 141.21142578h0.01977416z',
onclick: function (){
param.renew();
}
},
},
emphasis:{
iconStyle:{
borderColor:'#3B5077'
}
}
},
series: [
// {
// name: '散点',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: convertData(param.data),
// symbolSize: 10,
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: false
// },
// emphasis: {
// show: true
// }
// },
// itemStyle: {
// normal: {
// color: '#ff0000'
// }
// }
// },
// {
// name: '点',
// type: 'scatter',
// coordinateSystem: 'geo',
// symbol: 'pin', //气泡
// symbolSize: function(val) {
// var a = (maxSize4Pin - minSize4Pin) / (max - min);
// var b = minSize4Pin - a * min;
// b = maxSize4Pin - a * max;
// return a * val[2] + b;
// },
// label: {
// normal: {
// show: false,
// textStyle: {
// color: '#fff',
// fontSize: 9,
// },
// formatter:function(params) {
// return params.value[2];
// }
// }
// },
// itemStyle: {
// normal: {
// color: '#F62157', //标志颜色
// }
// },
// zlevel: 6,
// data: convertData(param.data),
// },
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(param.data.sort(function(a, b) {
return b.value - a.value;
}).slice(, )),
symbolSize: ,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
borderColor:'yellow',
shadowBlur: ,
shadowColor: 'yellow'
},
emphasis:{
}
},
zlevel:
},
{
type: 'map',
map: param.mapName,
geoIndex: ,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: param.startRoam,
animation: false,
data: param.data
},
],
dataRange: {
x: 'left',
y: 'bottom',
splitList: [
{start: one},
{start: two, end: one},
{start: three, end: two},
{start: four, end: three},
{end: four}
],
color: ['#1678e7','#33a6ff','#70c1fe','#b0deff','#e1f2ff']
},
geo: {
show: true,
map: param.mapName,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: param.startRoam,
itemStyle: {
normal: {
areaColor: '#f1f1f1',//角落图
borderColor: '#666',
},
emphasis: {
areaColor: '#FFB321',
}
}
},
}
return option;
}
}
环形图.js
export default {
/**
* 环形图
* name 名称
* value 已有值
* all 总值
* color 颜色
*/
doughnut(query) {
let option = {
title: {
text: [
`{a|${query.value}}`,
`{b| / ${query.all}}`
].join(''),
textStyle: {
color: query.color,
rich: {
a: {
fontSize: ,
color: query.color
},
b: {
fontSize: ,
color: '#666'
}
}
},
x: 'center',
y: 'center',
},
legend: {
bottom:,
show: true,
itemGap: ,
data: [query.name]
},
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
label: {
show: false
},
labelLine: {
show: false
},
hoverAnimation: false,
cursor:'auto',
data: [{
value: query.value,
name: query.name,
itemStyle: {
normal: {
color:query.color
},
emphasis:{
color:query.color
}
}
}, {
name: '',
value: query.all>?(query.all-query.value):null,
itemStyle: {
normal: {
color:'#efefef'
},
emphasis:{
color:'#efefef'
}
}
}]
}]
};
return option;
}
}
柱状图.js
export default {
/**
* 柱状图
* title 标题
* xData x轴数据
* xName x轴名字
* yData y轴数据
* yTotal 总量
*/
bar(param) {
var xData = param.xData;
var data = param.yData
var yMax = (/data.length)+'%';
//var yMax =100;
var dataShadow = param.yTotal;
let option = {
title: {
text: param.title,
x: 'center',
y: '10px',
textStyle: {
fontSize: ,
color: '#000'
}
},
tooltip: {
show: true
},
xAxis: {
name: param.xName,
nameTextStyle: {
color: ['#000'],
},
data: xData,
axisLabel: {
interval:'', //zcg
rotate:-, //倾斜度
textStyle: {
color: '#000'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z:
},
yAxis: {
name: '',
nameTextStyle: {
color: ['#000']
},
axisLine: {
//show: false
lineStyle: {
color: ['#ddd']
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#ddd']
}
},
axisLabel: {
textStyle: {
color: '#000'
}
}
},
grid: {
y2: '60px' //zcg x轴文字的高度
},
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: { color: '#ddd' }
},
barGap: '-100%',
barCategoryGap: '-10%',
barMaxWidth: yMax,
data: dataShadow,
animation: false,
},
{
type: 'bar',
barMaxWidth: yMax,
itemStyle: {
normal: {
color: "#7baaf3"
},
emphasis: {
color: "#5e96e9"
}
},
data: data
}
]
};
return option;
}
}
Echarts配置的更多相关文章
- webpack echarts配置实例
简单介绍 本例介绍怎样在webpack中构建依赖echats的项目,echarts有好几种方式引入项目: 标签单文件引入:自1.3.5開始,ECharts提供标签式引入.假设项目本身并非基于模块化开发 ...
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
- [开源]eCharts配置简化包OptionCreator[typescript版]
eCharts存在问题 配置eCharts的option,对于大部分的开发者来说,复杂情况下是一件繁琐的事情.为什么繁琐,大致有以下这些原因 大小写敏感:在没有IDE的智能提示下,很容易写错,而且即使 ...
- [开源][示例更新]eCharts配置简化包OptionCreator[typescript版]
前言 eCharts作为国内优秀的开源图表工具,功能强大,但是使用中也存在一定的问题. 文档更新较慢,文档说明不详细. 前端使用的弱类型语言,数据结构在灵活的同时,也容易造成一些问题.例如某些属性到底 ...
- echarts配置进度池
近日,使用dataV中的配置,完成了进度池图表,但是有有一个缺点,就是官方没有动画方面的配置.如下图: 为了给这个进度池添加动画效果,我反向的在进度池上面铺一层由一格一格与进度池中相同的块状组成的与背 ...
- echarts配置环形饼图的参数，以及牵引线显示百分比，中间数据
最近项目有多处是用echarts的,有环形图,折线图,饼图,总结了一下. 本次主要讲环形图,折线图在下期. 这个是最终的效果图.下面附上代码 //三种占比 var myChartType = echa ...
- echarts 配置
堆叠柱状图, 只要保证 stack 属性相同,就强制画成一列 这就是切割线
- echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕
-------tip1-------- 在 tooltip 里边配置:拼接字符串: tooltip : { trigger: 'axis', formatter:function(params) { ...
- Echarts 之三 —— 地市联动数据统计二
一.简介 除了是一个地图之外,我们也可以使用多地图进行地市.区县联动数据统计.需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该地市区县的数据信息.二 ...
随机推荐
- yum进程被占用
使用yum安装软件的时候出现,/var/run/yum.pid 已被锁定,PID 为 6503 的另一个程序正在运行的问题 [root@localhost mysql]# yum install gc ...
- linux修改hosts配置
参考 https://blog.csdn.net/qq_15192373/article/details/81093542 1. terminal中输入: sudo gedit /etc/hosts ...
- 解决 i5 6500 安装黑苹果 Sierra 显卡不正常问题
i5 6500内置HD 530显卡,装好Sierra显卡驱动不太正常. 先下载Clover configurator 用Clover configurator加载 EFI (Mount EFI)分区 ...
- Android 动态设置 layout_centerInParent
RelativeLayout.LayoutParams rp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutPa ...
- 用 ilasm 反编译、修改.net dll文件
有些.net dll我们没有源码,如果要修改某些东西,可以用ilasm.exe反编译为il代码,修改后再编译回dll ilasm通常放在以下路径 C:\Windows\Microsoft.NET\Fr ...
- 初学者怎么才能快速学会Python？
提起对Python的印象,除了全能之外恐怕就是简单易学了.很多人都在推荐新手学Python入门,毕竟语法简单.语句简洁,所谓“人生苦短我用Python”绝不是一句空话.不过也不能忽视一点:Python ...
- Centos7下mysql的主从配置
最近,有朋友业务并发量比较大,让我帮他配置个主从,来缓解数据库的压力.下面就是我配置的,有需要的朋友可以借鉴下. 首先,我得到2台服务器: 172.18.2.142(主) 172.18.2.141(从 ...
- Oracle开发常用函数 max 最大数 自动加 1 的模式
create sequence bs_com_seq increment by 1 start with 1 minvalue 1 maxvalue 999999 cycle nocache orde ...
- LeetCode 712. Minimum ASCII Delete Sum for Two Strings
Given two strings s1, s2, find the lowest ASCII sum of deleted characters to make two strings equal. ...
- controller 接口写法
import org.apache.commons.io.IOUtils; import javax.servlet.ServletInputStream; @RequestMapping(" ...