<template>
<div>
<div id="chart_example"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
data: [
[
[28604, 77, 17096869, 'Australia', 1990],
[31163, 77.4, 27662440, 'Canada', 1990],
[1516, 68, 1154605773, 'China', 1990],
[13670, 74.7, 10582082, 'Cuba', 1990],
[28599, 75, 4986705, 'Finland', 1990],
[29476, 77.1, 56943299, 'France', 1990],
[31476, 75.4, 78958237, 'Germany', 1990],
[28666, 78.1, 254830, 'Iceland', 1990],
[1777, 57.7, 870601776, 'India', 1990],
[29550, 79.1, 122249285, 'Japan', 1990],
[2076, 67.9, 20194354, 'North Korea', 1990],
[12087, 72, 42972254, 'South Korea', 1990],
[24021, 75.4, 3397534, 'New Zealand', 1990],
[43296, 76.8, 4240375, 'Norway', 1990],
[10088, 70.8, 38195258, 'Poland', 1990],
[19349, 69.6, 147568552, 'Russia', 1990],
[10670, 67.3, 53994605, 'Turkey', 1990],
[26424, 75.7, 57110117, 'United Kingdom', 1990],
[37062, 75.4, 252847810, 'United States', 1990]
],
[
[44056, 81.8, 23968973, 'Australia', 2015],
[43294, 81.7, 35939927, 'Canada', 2015],
[13334, 76.9, 1376048943, 'China', 2015],
[21291, 78.5, 11389562, 'Cuba', 2015],
[38923, 80.8, 5503457, 'Finland', 2015],
[37599, 81.9, 64395345, 'France', 2015],
[44053, 81.1, 80688545, 'Germany', 2015],
[42182, 82.8, 329425, 'Iceland', 2015],
[5903, 66.8, 1311050527, 'India', 2015],
[36162, 83.5, 126573481, 'Japan', 2015],
[1390, 71.4, 25155317, 'North Korea', 2015],
[34644, 80.7, 50293439, 'South Korea', 2015],
[34186, 80.6, 4528526, 'New Zealand', 2015],
[64304, 81.6, 5210967, 'Norway', 2015],
[24787, 77.3, 38611794, 'Poland', 2015],
[23038, 73.13, 143456918, 'Russia', 2015],
[19360, 76.5, 78665830, 'Turkey', 2015],
[38225, 81.4, 64715810, 'United Kingdom', 2015],
[53354, 79.1, 321773631, 'United States', 2015]
]
],
dimensions: ['product', '2015', '2016', '2017'],
source: [
// ['product', '2015', '2016', '2017'],
// ['Matcha Latte', 43.3, 85.8, 93.7],
// ['Milk Tea', 83.1, 73.4, 55.1],
// ['Cheese Cocoa', 86.4, 65.2, 82.5],
// ['Walnut Brownie', 72.4, 53.9, 39.1]
// 或者一下形式
{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
]
}
},
mounted(){
this.initEcharts()
},
methods:{
initEcharts(){
// 监听浏览器的大小
var myChart = echarts.init(document.getElementById('chart_example'));
window.onresize = function() {
myChart.resize();
// 给表格一个默认大小
// myChart.resize({
// width: 800,
// height: 400
// });
};
// 给默认的宽高
// let myChart = echarts.init(document.getElementById('chart_example'),null,{width:800,height:500});
let option = {
// 标题
title: {
text: 'ECharts 示例'
},
// 全局调色盘。
color: ['#e69d87'],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
backgroundColor: {
type: 'linear',// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
// type: 'radial', // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
// x: 0.3,
// y: 0.3,
// r: 0.8,
x: 0,
y: 1,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0, // 0% 处的颜色
color: '#f7f8fa'
},
// {
// offset: 0.5,
// color: '#61a0a8'
// },
{
offset: 1, // 100% 处的颜色
color: '#f7f8fa'
}
],
global: false // 缺省为 false
},
// {
// image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
// repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
// },
// 直角坐标系内绘图网格
grid: {
left: 10,
containLabel: true,//grid 区域是否包含坐标轴的刻度标签。
bottom: 10,
top: 10,
right: 30
},
// x轴
xAxis : [
{
type : 'category', //类别
// data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
// data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
// axisTick: {
// alignWithLabel: true
// },
splitLine: {
show: false //是否显示分隔线。默认数值轴显示,类目轴不显示。
}
},
],
// y轴
yAxis: {},
// yAxis : [
// {
// type : 'value' ,// 数值轴,适用于连续数据。
// }
// {
// splitLine: {
// show: false
// },
// scale: true //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。
// }
// ],
// 局部设置
// series : [
// 这是一个条形图
// {
// name:'每月花费',
// type:'bar',
// barWidth: '60%',
// data:[995,666,444,858,654,236,645,546,846,225,547,356],
// color: [
// '#759aa0',
// ]
// },
// 这是一个扇形图
// {
// type: 'pie',
// 此系列自己的调色盘。
// color: [
// '#96BFFF'
// ]
// }
// ],
dataset:{
// (I)提供数据,(II)指定数据到视觉的映射。
source:this.source,
dimensions:this.dimensions
},
series:[
// {
// type:'bar',
// name:'2015',
// data:[89.3,92.1,94.4,85.4]
// },
// {
// type:'bar',
// name:'2016',
// data: [95.8, 89.4, 91.2, 76.9]
// }
{
type:'bar',
},
{
type:'bar',
},
{
type:'bar',
}
]
// series: [
// {
// name: '1990',
// data: this.data[0],
// type: 'scatter', // 散点(气泡)图
// symbolSize: function(data) {
// return Math.sqrt(data[2]) / 5e2; //一个数的平方根 5e2就是500的
// }, //标记的大小,
// // // 高亮样式。
// emphasis: { // 高亮的图形和标签样式。 高亮后的放大效果。
// focus: 'series', // 聚焦当前高亮的数据所在的系列的所有图形。
// label: {
// show: true, //是否显示标签。
// // formatter: 'This is a normal label.',
// formatter: function(param) { //标签内容格式器的文字
// return param.data[3];
// },
// position: 'top'
// }
// },
// itemStyle: {
// shadowBlur: 10, //图形阴影的模糊大小
// shadowColor: 'rgba(120, 36, 10, 0.5)', //图片的阴影
// shadowOffsetY: 5, //阴影垂直方向上的偏移距离。
// color: { //标记图片的颜色
// type: 'radial',
// x: 0.4,
// y: 0.3,
// r: 1,
// colorStops: [
// {
// offset: 0,
// color: 'rgb(251, 118, 123)'
// },
// {
// offset: 1,
// color: 'rgb(204, 46, 72)'
// }
// ]
// }
// }
// },
// {
// name: '2015',
// data: this.data[1],
// type: 'scatter',
// symbolSize: function(data) {
// return Math.sqrt(data[2]) / 5e2;
// },
// emphasis: {
// focus: 'series',
// label: {
// show: true,
// formatter: function(param) {
// return param.data[3];
// },
// position: 'top'
// }
// },
// itemStyle: {
// shadowBlur: 10,
// shadowColor: 'rgba(25, 100, 150, 0.5)',
// shadowOffsetY: 5,
// color: {
// type: 'radial',
// x: 0.4,
// y: 0.3,
// r: 1,
// colorStops: [
// {
// offset: 0,
// color: 'rgb(129, 227, 238)'
// },
// {
// offset: 1,
// color: 'rgb(25, 183, 207)'
// }
// ]
// }
// }
// }
// ]
};
myChart.setOption(option);
//建议加上以下这一行代码,不加的效果图(当浏览器窗口缩小的时候)。超过了div的界限(红色边框)
window.addEventListener('resize',function() {myChart.resize()});
}
}
}
</script>
<style lang="scss" scoped>
#chart_example,
html,
body {
width: 100%;
}
#chart_example {
height: 400px;
}
</style>
eachrts注释解释(散点图)
最新推荐文章于 2024-08-14 15:45:18 发布