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 之三 —— 地市联动数据统计二
一.简介 除了是一个地图之外,我们也可以使用多地图进行地市.区县联动数据统计.需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该地市区县的数据信息.二 ...
随机推荐
- HDU_1113_字符串处理
Word Amalgamation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- HDU_1023_Train Problem II_卡特兰数
Train Problem II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- UICollectionView框架总结
一.UIcollectionView介绍 1.1.简介 首先看苹果官方文档 UICollectionView Class Reference 的介绍: The UICollectionView cla ...
- altera quartus 百度云分享 quartus prime 17.1 16.1 13.0
quartus prime 17.1 标准版 链接:https://pan.baidu.com/s/10QWejKdDobVxDSqnVPJ0xQ 提取码:hhvj 复制这段内容后打开百度网盘手机Ap ...
- [C++] muParser 的简单使用方法
关于 muParser 库 许多应用程序需要解析数学表达式.该库的主要目的是提供一种快速简便的方法. muParser是一个用C ++编写的可扩展的高性能数学表达式解析器库. 它的工作原理是将数学表达 ...
- Nginx配置文件的高亮显示设置
linux系统下vim或者vi编辑器默认是没有对nginx的语法高亮设置. 1.下载vi语法高亮配置到 ~/.vim/syntax,如果不存在则创建该目录,cd ~/.vim/syntax wget ...
- Mac下对Android apk反编译
在Mac上进行反编译apk,需要三个工具,分别为(附下载地址): apktool,下载Mac版 作用:资源文件获取,能够提取出图片文件和布局文件进行使用查看 dex2jar,下载最新的即可,目前是2. ...
- Pyhon信息采集 - 喜马拉雅专辑歌曲
目录 Pyhon信息采集 - 喜马拉雅专辑歌曲 Pyhon信息采集 - 喜马拉雅专辑歌曲 setting.py # 喜马拉雅URL XMLY_URL = "https://www.ximal ...
- 【codeforces 514D】R2D2 and Droid Army
[题目链接]:http://codeforces.com/contest/514/problem/D [题意] 给你每个机器人的m种属性p1..pm 然后r2d2每次可以选择m种属性中的一种,进行一次 ...
- PatentTips – RDMA data transfer in a virtual environment
BACKGROUND Embodiments of this invention relate to RDMA (remote direct memory access) data transfer ...