echarts总结
一.初步实现echarts
1.npm install echarts --save
2.import * as echarts from 'echarts';
3.
<div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
4.
<template>
<div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'HelloWorld',
mounted() {
this.draw()
},
methods: {
draw() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.myEchart);
var option = {
title: {
text: 'ECharts 入门示例',
show:true,
link:'http://www.baidu.com',
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
myChart.setOption(option);
}
}
}
</script>
二.常用option的使用
1.title
title: { text: "Main Title",标题 subtext: "Sub Title",副标题文本, left: "center", title 组件离容器左侧的距离。 top: "center",title 组件离容器顶部的距离。 textStyle: {样式 fontSize: 30, color: "rgba(143, 19, 19, 1)" }, subtextStyle: {副标题样式 fontSize: 20 } }
2.legend
图例组件。
图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: { type: 'scroll', 'plain'
:普通图例。缺省就是普通图例 'scroll'
:可滚动翻页的图例。当图例数量较多时可以使用 orient: 'vertical', 滚动图例(垂直) 或 滚动图例(水平)。 right: 10,图例组件离容器右侧的距离。 top: 20, bottom: 20, data: data.legendData 图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name
},
3.tooltip
图例的 tooltip 配置,配置项同 tooltip。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip,如下示例:
legend: {
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
}
<template>
<div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'HelloWorld',
mounted() {
this.draw()
},
methods: {
draw() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.myEchart);
var option = option = {
color: ["#003366", "#006699", "#4cabce", "#e5323e"],
dataset: {
source: [
["type", "2012", "2013", "2014", "2015", "2016"],
["Forestwerwerwerwerwewefwefwe", 650, 332, 301, 334, 390],
["Steppesdfsdfsfsdf", 220, 182, 191, 234, 290],
["Desert", 150, 232, 201, 154, 190],
["Wetland", 98, 77, 101, 99, 40]
]
},
legend: {
formatter: function(name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
},
xAxis: {
type: "category",
axisTick: {
show: false
}
},
yAxis: {},
series: [{
type: "bar",
seriesLayoutBy: "row"
}, {
type: "bar",
seriesLayoutBy: "row"
}, {
type: "bar",
seriesLayoutBy: "row"
}, {
type: "bar",
seriesLayoutBy: "row"
}]
}
myChart.setOption(option);
}
}
}
</script>
4.series
系列 主要是放置柱状图 折线图 饼图 环形图等
<template>
<div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'HelloWorld',
mounted() {
this.draw()
},
methods: {
draw() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.myEchart);
var option = {
legend: {
orient: "vertical",
left: "left",
data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
},
series: [{
type: "pie",
data: [{
value: 335,
name: "Apple"
}, {
value: 310,
name: "Grapes"
}, {
value: 234,
name: "Pineapples"
}, {
value: 135,
name: "Oranges"
}, {
value: 1548,
name: "Bananas"
}]
}]
}
myChart.setOption(option);
}
}
}
</script>
4.series-effectScatter
带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。
<template>
<div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'HelloWorld',
mounted() {
this.draw()
},
methods: {
draw() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.myEchart);
var option = {
xAxis: {},
yAxis: {
scale: true
},
series: [{
name: "1990",
type: "effectScatter",
data: [
[38604, 77, 1709686944],//y x 大小
[37062, 75.4, 252847810]
],
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
colorBy: "data", //每个颜色根据data不一样
rippleEffect: {
brushType: "stroke" //波纹的绘制方式
}
}]
}
myChart.setOption(option);
}
}
}
</script>
L7的基本使用
1.npm i @antv/l7 @antv/l7-maps --save
2.
<template>
<div id="userMap"></div>
</template>
<script>
import {
Scene,
} from '@antv/l7'
import {
GaodeMap
} from '@antv/l7-maps'
export default {
name: 'HelloWorld',
mounted() {
this.initUserMap()
},
methods: {
initUserMap() {
new Scene({
id: 'userMap',
map: new GaodeMap({
pitch: 0,
style: 'dark',
mapStyle: 'amap://styles/darkblue',
center: [113.631419, 34.753439],
zoom: 4
})
});
}
}
}
</script>