标签：bar name 实现 chart value randomData 图表 data echarts
地图（china map）
// html
<div ref="fillcontainer">
<div id="fundPosition"></div>
</div>
//js
<script>
import echarts from 'echarts'; // 引入echarts插件
import '../../../node_modules/echarts/map/js/china.js'; // 引入china map数据
import '../../../node_modules/echarts/theme/roma.js' // 引入主题颜色
export default {
data () {
return {
chart: null
}
},
mounted () {
this.$nextTick(function() {
this.$refs.fillcontainer.style.height = (document.body.clientHeight - 160) + 'px';
this.drawMap('fundPosition') // 传入id
var that = this;
var resizeTimer = null;
// 保证页面在放大或缩小时，也能动态显示数据
window.onresize = function () {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
that.$refs.fillcontainer.style.height = (document.body.clientHeight 160) + 'px';
that.drawMap('fundPosition');
}, 100)
}
})
},
methods: {
randomData () {
return Math.round(Math.random() * 1000000);
}
drawMap(id) {
if (this.chart && this.chart.dispose) {
this.chart.dispose(); // 释放图表
}
this.chart = echarts.init(document.getElementById(id), "roma") // 第一个参数是ID名，第二个参数是主题色
this.chart.setOption({ // 配置图表
title: {
text: '2021年全国各省份投资情况',
subtext: '单位/万元',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['总投资额']
},
visualMap: {
min: 0,
max: 1200000,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本 默认为数值
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: { // 功能按钮
dataView: {readOnly: false}, // 数据视图
restore: {}, // 还原
saveAsImage: {} // 保存为图片
}
},
series: [
{
name: '总投资额',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal:{
show: true
},
emphasis: {
show: true
},
data:[
{name: '北京',value: this.randomData() },
{name: '天津',value: this.randomData() },
{name: '上海',value: this.randomData() },
{name: '重庆',value: this.randomData() },
{name: '河北',value: this.randomData() },
{name: '河南',value: this.randomData() },
{name: '云南',value: this.randomData() },
{name: '辽宁',value: this.randomData() },
{name: '黑龙江',value: this.randomData() },
{name: '湖南',value: this.randomData() },
{name: '安徽',value: this.randomData() },
{name: '山东',value: this.randomData() },
{name: '新疆',value: this.randomData() },
{name: '江苏',value: this.randomData() },
{name: '浙江',value: this.randomData() },
{name: '江西',value: this.randomData() },
{name: '湖北',value: this.randomData() },
{name: '广西',value: this.randomData() },
{name: '甘肃',value: this.randomData() },
{name: '山西',value: this.randomData() },
{name: '内蒙古',value: this.randomData() },
{name: '陕西',value: this.randomData() },
{name: '吉林',value: this.randomData() },
{name: '福建',value: this.randomData() },
{name: '贵州',value: this.randomData() },
{name: '广东',value: this.randomData() },
{name: '青海',value: this.randomData() },
{name: '西藏',value: this.randomData() },
{name: '四川',value: this.randomData() },
{name: '宁夏',value: this.randomData() },
{name: '海南',value: this.randomData() },
{name: '台湾',value: this.randomData() },
{name: '香港',value: this.randomData() },
{name: '澳门',value: this.randomData() }
]
}
}
]
})
}
}
}
</script>
饼图（pie / bar）
<div ref="fillcontainer">
<el-row :gutter="10">
<el-col :span="12" style="height: 100%;">
<div id="typePosition"></div>
</el-col>
<el-col :span="12" style="height: 100%;">
<div id="typePosition2"></div>
</el-col>
</el-row>
</div>
<script>
import echarts from 'echarts';
import '../../../node_modules/echarts/theme/vintage.js';
export default {
data () {
return {
chart: null,
chart_bar: null,
data: {
legendData: ['储蓄', '基金', '股票', '债券', '期货'],
seriesData: [
{value: this.randomData(), name: '储蓄'},
{value: this.randomData(), name: '基金'},
{value: this.randomData(), name: '股票'},
{value: this.randomData(), name: '债券'},
{value: this.randomData(), name: '期货'}
]
}
}
},
methods: {
drawpie(id) {
if (this.chart && this.chart.dispose) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById(id), 'vintage');
this.chart.setOption({
angleAxis: {},
radiusAxis: {
type: 'category',
data: ['2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年'],
z: 10
},
polar: {},
series: [{
type: 'bar',
data: [80, 20, 30, 40, 70, 50, 10],
coordinateSystem: 'ploar',
name: '储蓄',
stack: 'a'
}{
type: 'bar',
data: [60, 40, 60, 10, 30, 20, 10],
coordinateSystem: 'polar',
name: '基金',
stack: 'a'
}, {
type: 'bar',
data: [10, 80, 30, 40, 50, 20, 50],
coordinateSystem: 'polar',
name: '股票',
stack: 'a'
},{
type: 'bar',
data: [60, 20, 10, 80, 30, 20, 50],
coordinateSystem: 'polar',
name: '债券',
stack: 'a'
}, {
type: 'bar',
data: [90, 20, 10, 40, 10, 20, 50],
coordinateSystem: 'polar',
name: '期货',
stack: 'a'
}],
legend: {
show: true,
data: ['储蓄', '基金', '股票','债券','期货']
}
})
},
drawbar(id){
if ( this.chart_bar && this.chart_bar.dispose) {
this.chart_bar.dispose();
}
this.chart_bar = echarts.init(document.getElementById(id),'vintage');
this.chart_bar.setOption({
angleAxis: {
type: 'category',
data: ['2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年'],
z: 10
},
radiusAxis: {},
polar: {},
series: [{
type: 'bar',
data: [80, 20, 30, 40, 70, 50, 10],
coordinateSystem: 'polar',
name: '储蓄',
stack: 'a'
}, {
type: 'bar',
data: [60, 40, 60, 10, 30, 20, 10],
coordinateSystem: 'polar',
name: '基金',
stack: 'a'
}, {
type: 'bar',
data: [10, 80, 30, 40, 50, 20, 50],
coordinateSystem: 'polar',
name: '股票',
stack: 'a'
},{
type: 'bar',
data: [60, 20, 10, 80, 30, 20, 50],
coordinateSystem: 'polar',
name: '债券',
stack: 'a'
}, {
type: 'bar',
data: [90, 20, 10, 40, 10, 20, 50],
coordinateSystem: 'polar',
name: '期货',
stack: 'a'
}],
legend: {
show: true,
data: ['储蓄', '基金', '股票','债券','期货']
}
})
}
},
mounted () {
this.$nextTick(function () {
this.drawpie('typePosition');
this.drawbar('typePosition2');
window.onresize = () => {
this.drawpie('typePosition');
this.drewbar('typePosition2');
}
})
}
}
</script>
柱状图
<div class="fillcontainer" ref="fillcontainer">
<div id="incomePayPosition" class="echartsPosition"></div>
</div>
export default {
data() {
return {
chart: null
};
},
mounted() {
this.setInit();
// 保证页面在放大或缩小时，也能够动态的显示数据
window.onresize = () => {
this.setInit();
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
setInit(){
this.$nextTick(() => {
this.$refs.fillcontainer.style.height = (document.body.clientHeight - 160)+'px'
this.initChart();
this.chart = null;
});
},
initChart() {
this.chart = echarts.init(document.getElementById('incomePayPosition'));
const data = {};
(function() {
const xAxisData = [];
const seriesIncome = [];
const seriesPay = [];
const seriesaverage = [];
for (let i = 1; i < 13; i++) {
xAxisData.push(i + '月份');
}
data['xAxisData'] = xAxisData;
for (let i = 1; i < 13; i++) {
seriesIncome.push(Math.round(Math.random()*10000));
seriesPay.push(Math.round(Math.random()*10000));
seriesaverage.push(Math.round(Math.random()*10000));
}
data['seriesIncome'] = seriesIncome;
data['seriesPay'] = seriesPay;
data['seriesaverage'] = seriesaverage;
})();
this.chart.setOption({
backgroundColor: '#CCFFCC',
title: {
text: '收支统计',
subtext: '单位/万元',
x: '4%',
textStyle: {
color: '#000000',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '12'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
textStyle: {
color: '#fff'
}
}
},
grid: {
borderWidth: 0,
top: 110,
bottom: 95,
textStyle: {
textStyle: {
color: '#000000'
}
}
},
legend: {
x: '15%',
top: '10%',
textStyle: {
color: '#90979c'
},
data: ['收入', '支出', '平均']
},
calculable: true,
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#0099CC'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
interval: 0
},
data: data.xAxisData
}],
yAxis: [{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#0099CC'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0
},
splitArea: {
show: false
}
}],
dataZoom: [{
show: true,
height: 30,
xAxisIndex: [
0
],
bottom: 30,
start: 10,
end: 80,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: '#336699'
},
textStyle: {
color: '#000'
},
borderColor: '#339999'
}, {
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
name: '收入',
type: 'bar',
stack: '总量',
barMaxWidth: 35,
barGap: '10%',
itemStyle: {
normal: {
color: '#66CC99',
label: {
show: true,
textStyle: {color: '#fff'},
position: 'insideTop',
formatter(p) {return p.value > 0 ? p.value : '' }
}
}
},
data: data.seriesIncome
},
{
name: '支出',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: '#0099CC',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data:data.seriesPay
}, {
name: '平均',
type: 'line',
stack: '总量',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
normal: {
color: '#FF9966',
barBorderRadius: 0,
label: {
show: true,
position: 'top',
formatter(p) {
return p.value > 0 ? p.value : '';
}
}
}
},
data:data.seriesaverage
}
]
})
}
}
}
标签：bar,name,实现,chart,value,randomData,图表,data,echarts 来源： https://blog.csdn.net/qq_34261347/article/details/120492330
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。