echarts监听屏幕的改变重新绘制图片
echarts模拟飞机航线地图特效
隐藏x,y轴线+饼状图+横向柱状图+两种类型数据
<template>
<div class="container">
<div style="color:#fff">111</div>
<div>隐藏x,y轴</div>
<div id="trafficDetailChart" class="trafficDetailChart">
</div>
<div>饼状图</div>
<div id="traffic" class="traffic"></div>
<div>横向柱状图</div>
<div id="UserChart" class="UserChart"></div>
<div>两种类型的数据</div>
<div id="deviceChart" class="deviceChart"></div>
</div>
</template>
<script>
export default {
name: "Echarts",
data() {
return {
siteDetailsName: [],
pieArray: [],
userTotalsArray: [],
dataTimes: [],
regUserNewTotals: [],
activeUserTotals: [],
}
},
created() {
},
mounted() {
this.init();
},
computed: {},
methods: {
init() {
this.siteDetailsName = [];
var arr1 = [1, 2, 3, 4];
this.siteDetailsName.push(...arr1);
this.showTrafficDetailEcharts();
this.pieArray = [
{ value: 1, name: '公众号' },
{ value: 2, name: '广告' },
{ value: 3, name: '小程序' },
{ value: 4, name: '付费' },
];
this.showTrafficPercent();
this.userTotalsArray = ['3', '5', '7'];
this.showUserEcharts();
this.dataTimes = [1, 2, 3, 4, 5, 6];
this.regUserNewTotals = [600, 1200, 1800, 2400, 3000, 3600];
this.activeUserTotals = [5000, 10000, 15000, 20000, 25000, 30000];
this.showUserNewEcharts();
},
showTrafficDetailEcharts() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('trafficDetailChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data: ['']
},
xAxis: {
type: 'category',
show: true,
axisLabel: {
interval: 0,
},
splitLine: { show: false },
axisLine: { show: false },
axisTick: { show: false },
data: ["公众号", "广告", "小程序", "付费"]
},
yAxis: {
//这是设置的false，就不显示左方的y轴，
show: false
},
series: [{
name: '销量',
type: 'bar',
barWidth: 30,
itemStyle: {
normal: {
//定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
'#AB98FF', '#F00', '#0F0', '#00F',
];
return colorList[params.dataIndex]
},
//顶端显示数字
label: {
show: true,
position: 'top',
textStyle: {
color: ' #333333 ',
}
}
},
},
data: this.siteDetailsName
}],
};
// 绘制图表
myChart.setOption(option);
},
showTrafficPercent() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('traffic'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
color: ['#F7C671', '#85E3BD', '#6B86FF', '#AB98FF', '#3BCCE8'],
legend: {
orient: 'vertical',
x: 'right',
data: ['公众号', '广告', '小程序', '付费']
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: false, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: false },
saveAsImage: { show: false }
}
},
calculable: true,
series: [{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
itemStyle: {
normal: {
label: {
show: false //隐藏标示文字
},
labelLine: {
show: false //隐藏标示线
}
}
},
data: this.pieArray
}]
};
myChart.setOption(option);
},
showUserEcharts() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('UserChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
grid: {
width: 300,
height: 100,
left: '5%',
right: '0%',
containLabel: true
},
tooltip: {},
legend: {
data: ['']
},
xAxis: {
type: 'value',
show: true,
axisLabel: {
interval: 0,
show: false
},
splitLine: { show: false },
axisLine: { show: false },
axisTick: { show: false },
data: []
},
yAxis: {
type: 'category',
data: ["新增用户", "新增" + '\n' +
"注册用户", "活跃用户"
],
splitLine: { show: false },
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#999999",
interval: 0,
},
},
series: [{
name: '销量',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function(params) {
// build a color map as your need.
var colorList = [
'#AB98FF', '#AB98FF', '#AB98FF',
];
return colorList[params.dataIndex]
},
//顶端显示数字
label: {
show: true,
position: 'right',
textStyle: {
color: ' #333333 ',
}
}
},
},
data: this.userTotalsArray
}],
};
// 绘制图表
myChart.setOption(option);
},
showUserNewEcharts() {
console.info('showUserNewEcharts');
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('deviceChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data: ['按摩用户', '注册用户'],
orient: 'horizontal', // 'vertical'
x: 'left', // 'center' | 'left' | {number},
y: 'bottom', // 'center' | 'bottom' | {number}
},
xAxis: {
type: 'category',
show: true,
axisLabel: {
interval: 0,
},
splitLine: { show: false },
axisLine: { show: false },
axisTick: { show: false },
data: this.dataTimes
},
yAxis: {
//这是设置的false，就不显示左方的y轴，默认是true的
show: true,
type: 'value',
axisLabel: {
formatter: function(value) {
return value > 1000 ? value / 1000 + 'k' : value;
}
}
},
series: [{
name: '按摩用户',
type: 'bar',
barWidth: 13,
itemStyle: {
normal: {
color: '#6778FF',
//顶端显示数字
label: {
show: true,
position: 'top',
textStyle: {
color: ' #333333 ',
}
}
},
},
data: this.activeUserTotals
}, {
name: '注册用户',
type: 'bar',
barWidth: 13,
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: '#B398FF',
//顶端显示数字
label: {
show: true,
position: 'top',
textStyle: {
color: ' #333333 ',
}
}
},
},
data: this.regUserNewTotals
}],
}
// 绘制图表
myChart.setOption(option);
},
},
}
</script>
<style scoped>
.container {
width: 375px;
height: 100%;
}
.trafficDetailChart {
/*background: red;*/
width: 345px;
height: 260px;
}
.traffic {
width: 355px;
height: 200px;
/*background: blue;*/
margin: 0 10px;
}
.UserChart {
height: 180px;
}
.deviceChart {
height: 300px;
}
</style>
顶端显示数字+隐藏y轴坐标，完全展示x轴坐标。
获取 ECharts
npm获取
npm install echarts --save
main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts=echarts使用ECharts
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<div id="myChart" style="width: 360px;height:400px; margin-top: 30px"></div>通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码
mounted: function () {
this.showDetail();
},
methods: {
showDetail() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '增长概况'
},
tooltip: {},
legend: {
data: ['']
},
xAxis: {
type: 'category',
axisLabel: {
//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
//rotate: 30,
//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
interval: 0
},
data: ["新增场地数", "新增设备数", "新增用户数", "总流量"]
},
yAxis: {
//这是设置的false，就不显示左方的y轴，默认是true的
show: false
},
series: [{
name: '销量',
type: 'bar',
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
color: function (params) {
// build a color map as your need.
var colorList = [
'#f00', '#0f0', '#00f', 'orange',
];
return colorList[params.dataIndex]
},
//顶端显示数字
label: {
show: true,
position: 'top',
textStyle: {
color: 'black'
}
}
},
},
data: [2, 4, 6, 8]
}],
}
// 绘制图表
myChart.setOption(option);
},
}echarts 隐藏x轴 y轴 网格线
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine:{show:false},
axisLine: {show: false},
axisTick: {show: false}
},
yAxis: {
type: 'category',
data: ['001','002','003','004','005','006'],
splitLine:{ show:false} ,
axisLine: {show: false},
axisTick: {show: false}
},
---------------------
作者：Alex81320
来源：CSDN
原文：https://blog.csdn.net/Alex81320/article/details/72461187
版权声明：本文为博主原创文章，转载请附上博文链接！
echarts设置柱状颜色为渐变色
设置柱条颜色为渐变色
{
name: '饮水量',
type: 'bar',
data: [200, 620, 100, 1400, 1440],
barWidth: 20,//柱宽
itemStyle: {
normal: {
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFDE43'
}, {//底部开始
offset: 1,
color: '#FF5910'
}])
}
}
}
原文：https://blog.csdn.net/qq_29484537/article/details/78932355
bug:点击柱状图颜色变白
颜色使用不选用数组
// color: function (params) {
// // build a color map as your need.
// var colorList = [
// '#FF5200', '#FF5200', '##FF5200', '#FF5200',
// ];
// return colorList[params.dataIndex]
// },
//都是一种颜色只用这种方式，不然会出现点击出现白板的情况
color:'#FF5200',。。。
3900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
