echarts中升级到版本5以后,使用方法发生了改变,注意不兼容ie8了,还有引入方法改变了。
cnpm install echarts --save
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, GridComponent, CanvasRenderer]);
*一定要给饼图设置宽高!!!
<style lang="scss" scoped>
.picChart {
width: 800px;
height: 500px;
}
</style>
示例1:饼图自定义legend文字内容,以及饼图中间显示数量
<style lang="scss" scoped>
.picChart {
width: 800px;
height: 500px;
}
</style>
<template>
<div ref="picChart" class="picChart" />
</template>
<script>
import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { PieChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'
export default {
name: 'DocumentCancellation',
data() {
return {
dataList: [
{ value: 382318, name: 'A类' },
{ value: 136470, name: 'B类' },
{ value: 208120, name: 'C类' }
]
}
},
created() {
echarts.use([
TitleComponent,
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout
])
},
mounted() {
this.loadChart()
},
methods: {
loadChart() {
const myChart = echarts.init(this.$refs['picChart'])
const dataName = []
let total = 0
this.dataList.forEach(x => {
dataName.push(x.name)
total += parseFloat(x.value)
})
const option = {
legend: {
orient: 'vertical',
right: '0',
top: 'center',
padding: [0, 20, 0, 20], // 可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
data: [
{
name: 'A类'
},
{
name: 'B类'
},
{
name: 'C类'
}
],
formatter: (name) => {
let total = 0
let target
const value = this.dataList.filter(x => x.name == name)[0].value
for (let i = 0, l = this.dataList.length; i < l; i++) {
total += this.dataList[i].value
if (this.dataList[i].name == name) {
target = this.dataList[i].value
}
}
const arr = [
'{name|' + name +
'}{value|' + value +
'}{percentage|' + ((target / total) * 100).toFixed(2) + '%}'
]
return arr.join('\n')
},
textStyle: {
rich: {
name: {
fontSize: 20,
align: 'left',
padding: [20, 0, 20, 20],
lineHeight: 40,
width: 100
},
value: {
fontSize: 20,
align: 'right',
padding: [20, 0, 20, 20]
},
percentage: {
fontSize: 20,
align: 'right',
padding: [20, 0, 20, 20]
}
}
}
},
title: {
zlevel: 0,
text: [
'{value|' + (total / 1000 > 1 ? (total / 1000).toFixed(2) + '万' : total) + '}',
'{name|总数}'
].join('\n'),
top: 'center',
left: '25%',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#303133',
fontSize: 40,
fontWeight: 'bold',
lineHeight: 50
},
name: {
color: '#303133',
fontSize: 18,
lineHeight: 28
}
}
}
},
color: [
'#d40000',
'#ff8a00',
'#fcdb00',
'#84ff00',
'#00ffc0',
'#1e00ff',
'#ff00de',
'#8400ff'
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
series: [
{
name: '订单数量',
type: 'pie',
center: ['25%', '50%'],
radius: ['55%', '70%'],
avoidLabelOverlap: false,
hoverAnimation: false, // 取消掉环形图鼠标移上去时自动放大
itemStyle: { // 图形外文字上下显示
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '20'
}
},
labelLine: {
show: false
},
data: this.dataList
}
]
}
option && myChart.setOption(option)
}
}
}
</script>
示例2:柱状图
<div class="picChart" ref="barChart"></div>
import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, GridComponent } from 'echart5/components'
import { BarChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'
dataList: [
{ value: 40, name: 'A类' },
{ value: 41, name: 'B类' },
]
created() {
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
BarChart,
CanvasRenderer,
LabelLayout
])
},
mounted() {
let myChart = echarts.init(this.$refs['barChart'])
let option = {
color: ['#02a7f0'],
xAxis: {
type: 'category',
data: ['A类', 'B类']
},
yAxis: {
type: 'value'
},
series: [
{
barWidth: 30,
data: this.dataList,
type: 'bar'
}
]
}
option && myChart.setOption(option)
}
示例3:柱状堆叠
<div class="picChart" ref="picChart"></div>
import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { BarChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'
created() {
echarts.use([
TitleComponent,
TooltipComponent,
LegendComponent,
BarChart,
CanvasRenderer,
LabelLayout
])
},
mounted() {
let myChart = echarts.init(this.$refs['picChart'])
let option = {
legend: {
icon: 'circle',
},
color: [
'#236EFF',
'#80E2FF',
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '实缴全额',
stack: 'total',
type: 'bar',
barWidth: '20%',
data: [4, 32, 100, 234, 290, 120, 120]
},
{
name: '应缴全额',
stack: 'total',
type: 'bar',
barWidth: '20%',
data: [10, 52, 200, 334, 390, 330, 220]
},
]
}
option && myChart.setOption(option)
}
示例4:折线
.picChart{
height: 330px;
width: 100%;
}
<div class="picChart" ref="picChart"></div>
import * as echarts from 'echart5/core'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echart5/components'
import { LineChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'
data() {
return {
dataList: [140, 232, 101, 264, 90, 340, 250]
}
},
created() {
echarts.use([
TitleComponent,
TooltipComponent,
LegendComponent,
LineChart,
CanvasRenderer,
LabelLayout,
GridComponent
])
},
mounted() {
let myChart = echarts.init(this.$refs['picChart'])
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#4080FF'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '总投诉量',
type: 'line',
stack: 'Total',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#4080FF',
width: 5
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(229,236,253,0.6)'
},
{
offset: 1,
color: '#fff'
}
])
},
emphasis: {
focus: 'series'
},
data: this.dataList
},
]
}
option && myChart.setOption(option)
}
示例5:地图
.chart {
height: calc(724px - 55px);
width: 100%
}
<div class="chart">
<div ref="chart" :style="{width: '100%', height: '100%'}"></div>
</div>
import * as echarts from 'echart5/core'
import china from '@/utils/china.json'
import { VisualMapComponent, GeoComponent, TooltipComponent, LegendComponent } from 'echart5/components'
import { MapChart, LinesChart, EffectScatterChart } from 'echart5/charts'
import { LabelLayout } from 'echart5/features'
import { CanvasRenderer } from 'echart5/renderers'
data() {
return {
airData: [
{ name: '北京', value: 1 },
{ name: '天津', value: 2 },
{ name: '河北', value: 5 },
{ name: '山西', value: 7 },
{ name: '内蒙古', value: 10 },
{ name: '辽宁', value: 12 },
{ name: '吉林', value: 15 },
{ name: '黑龙江', value: 18 },
{ name: '上海', value: 20 },
{ name: '江苏', value: 22 },
{ name: '浙江', value: 25 },
{ name: '安徽', value: 30 },
{ name: '福建', value: 34 },
{ name: '江西', value: 96 },
{ name: '山东', value: 92 },
{ name: '河南', value: 13 },
{ name: '湖北', value: 27 },
{ name: '湖南', value: 17 },
{ name: '广东', value: 38 },
{ name: '广西', value: 59 },
{ name: '海南', value: 54 },
{ name: '重庆', value: 66 },
{ name: '四川', value: 8 },
{ name: '贵州', value: 1 },
{ name: '云南', value: 25 },
{ name: '西藏', value: 24 },
{ name: '陕西', value: 25 },
{ name: '甘肃', value: 19 },
{ name: '青海', value: 17 },
{ name: '宁夏', value: 52 },
{ name: '新疆', value: 10 },
{ name: '台湾', value: 8 }
]
}
},
created() {
echarts.use([
VisualMapComponent,
TooltipComponent,
GeoComponent,
LegendComponent,
MapChart,
LinesChart,
EffectScatterChart,
CanvasRenderer,
LabelLayout
])
},
mounted() {
let myChart = echarts.init(this.$refs['chart'])
const option = {
// 提示浮窗样式
tooltip: {
show: true,
padding: 0,
borderWidth: 1,
borderColor: '#fff',
backgroundColor: '#fff',
textStyle: {
color: '#000000',
fontSize: 12,
decoration: 'none',
overflow: 'break'
},
transitionDuration: 0,
trigger: 'item', //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
alwaysShowContent: false,
triggerOn: 'mousemove',
enterable: true, //鼠标是否可进入提示框浮层中
formatter: function(e) {
let data = e.data
if (data) {
let context = `
<div style="min-width: 180px;">
<div style=" background: rgba(205,225,252,0.14);padding: 10px 19px;">
<p style="color: #666;font-size:14px;line-height: 30px;">
${data.name}小区数
<span style="font-size: 24px;font-weight: bold;color: #FA5151;margin-left: 3px;"> ${data.value} </span>
个
</p>
</div>
<div style="margin: 7px 0 10px;padding: 0 19px;">
<p style="color: #757575;font-size: 12px;line-height: 17px;">
房屋总数(个):
<span style="font-size: 14px;color: #07B9B9;font-weight: bold;">3680</span>
</p>
<p style="color: #757575;font-size: 12px;line-height: 17px;">
房屋入住(个):
<span style="font-size: 14px;color: #07B9B9;font-weight: bold;">3000</span>
</p>
</div>
</div>
`
return context
}
}
},
//视觉映射组件(左下角)
visualMap: { //分段型视觉映射组件
show: false,
type: 'piecewise',
left: 50,
bottom: 50,
showLabel: true,
// 是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
calculable: false,
// 拖拽时,是否实时更新
realtime: true,
align: 'left',
itemWidth: 10,
itemHeight: 10,
inverse: true,
min: 0, //最小值
max: 10, //最大值
seriesIndex: [0],
color: ['red', 'skyblue'], //最小值与最大值对应的颜色
//各颜色代表的区域 lt:小于; lte:小于等于; gt:大于; gte:大于等于;
pieces: [
{
lt: 30,
label: '<1个',
color: '#A1DBFF'
},
{
gt: 30,
label: '>1个',
color: '#3AA1FF'
}
]
},
// 地图配置
geo: {
//使用 registerMap 注册的地图名称
map: 'china',
// layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
aspectScale: 0.6, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
zoom: 1.25, //视觉比例大小,1.2即为原有大小的1.2倍
//滚轮缩放的极限控制
scaleLimit: {
min: 1, //最小1倍
max: 3 //最大3倍
},
roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。
top: '15%',
label: {
// 图形上的文本标签
normal: {
show: true,
textStyle: {
color: '#fff'
},
fontSize: '8'
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: '#fff'
}
}
},
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: '#fff',
areaColor: '#AFE0FF',
borderWidth: 1
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: '#f98333',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 10,
borderWidth: 0,
shadowColor: 'rgba(0, 93, 255, 0.2)'
}
},
//右下角小地图
regions: [{
name: '南海诸岛',
itemStyle: {
normal: {
areaColor: '#AFE0FF',
borderColor: '#AFE0FF',
borderWidth: 1,
opacity: 1,
label: {
show: true,
color: '#009cc9'
}
}
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}]
},
series: [
{
selectedMode: false, //取消地图区域点击事件
geoIndex: 0, //将数据和第0个geo配置关联在一起
type: 'map',
roam: true,
data: this.airData,
label: {
show: true
}
},
// 选重点
{
type: 'effectScatter', //系列为涟漪类
coordinateSystem: 'geo',
showEffectOn: 'render', //涟漪特效的触发的方式 'render'直接显示 'emphasis'hover的时候显示
symbolSize: 10, //标记的大小
rippleEffect: { //涟漪的相关配置
brushType: 'stroke', //涟漪的类型 stroke填充 fill
scale: 5, //波纹的最大的缩放比例
period: 4 //涟漪的扩散周期
},
label: { //标签的配置
normal: {
formatter: '{b}',
show: true,
position: 'bottom',
color: '#333',
fontSize: 10,
offset: [0, 10] //文字偏移 [上,下]
},
textStyle: {
color: '#757575'
}
},
//每个点的配置
itemStyle: {
color: '#07B9B9'
},
data: [{
name: '上海',
value: [121.3359985, 31.1979007, 10] //经纬度与值
}, {
name: '拉萨',
value: [90.9169986, 29.29850075, 0]
}]
},
{
type: 'lines',
coordinateSystem: 'geo'
}
]
}
// 地图注册,第一个参数的名字必须和option.geo.map一致
echarts.registerMap('china', china)
option && myChart.setOption(option)
myChart.on('mouseover', function() { //取消鼠标移入地图区域高亮
myChart.dispatchAction({
type: 'legendUnSelect'
})
})
}