VUE笔记（十）Echarts

一、Echarts简介

1、什么是echarts

ECharts是一款基个基于 JavaScript 的开源可视化图表库

官网地址：Apache ECharts

国内镜像：ISQQW.COM x ECharts 文档（国内同步镜像） - 配置项

示例：echarts图表集

2、第一个Echarts

• 安装echarts依赖包

npm i echarts

• 引入Echarts

<template><div><div id="chart" class="box" ref="main"></div></div>
</template>
​
<script>
import * as echarts from 'echarts'
export default {mounted(){let options={title:{text:'在读学生学历统计'},xAxis:{//X轴的设置data:['初中','高中','大专','本科','硕士','博士']},yAxis:{},//Y轴的设置series:[//数据的设置{name:'销量',type:'bar',//设置为柱状图data:[10,10,35,30,10,5]}]}let mychart=echarts.init(this.$refs.main)mychart.setOption(options)}
}
</script>
​
<style>.box{width: 600px;height: 400px;background-color: #ffc;}
</style>

二、柱状图

1、常见效果设置

• 最大值、最小值、平均值标记设置

series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],markPoint:{data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},markLine:{data:[{type:'average',name:'平均值'}]}}]

• 图形上文字标签的设置

 series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],label:{show:true,color:'#ff0000',backgroundColor:'springgreen',width:20,height:20}}]

• 图形样式的设置

 series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],itemStyle:{color:'#0cc',shadowBlur:15,opacity:.8,shadowOffsetX:15}}]

• 设置图形的宽度

 series: [{name: seriesName,type: 'bar',data: [10,10,35,30,10,5],barWidth:15}]

• 更改x轴和y轴的角色

const options={xAxis: {},yAxis: { data:[10,10,35,30,10,5] },
}

2、title相关设置

属性	类型	含义
text	string	主标题文本
link	string	主标题超链接
textStyle	object	color:主标题文字的颜色。 fontStyle:主标题的风格 fontWeight:主标题字体的粗细
backgroundColor	Color	背景色
borderColor	Color	边框颜色
borderRadius	number|Array	圆角半径

let options={title:{text:'在读学生学历统计',link:'http://www.zhaijizhe.cn/studentSys',textStyle:{color:'#2ff',fontStyle:'italic',fontWeight:'bold'},backgroundColor:'#ccc',borderWidth:1,borderColor:'#bbb',borderRadius:5,padding:10    }
}

3、tooltip的相关配置

tooltip:提示框组件，用于配置鼠标滑过或点击图标时的显示框

• 触发类型:trigger

• 触发时机:triggerOn

• 格式化:formatter

const options={tooltip:{show:true,triggerOn:'click',formatter:`{b}的人数是{c}人`}  
}

4、toolbox的相关配置

toolbox:ECharts提供的工具栏：内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

const options={toolbox:{show:true,feature:{saveAsImage:{//导出图片show:true},restore:{//重置，配置项还原show:true},dataView:{//数据视图show:true},magicType: {//动态类型切换type: ['line', 'bar']},dataZoom:{//数据区域缩放show:true}}
}

5、legend的相关配置

legend:图例，用于筛选系列，需要和series配置使用

• legend中的data是一个数组

• legend中的data的值需要和series数组中某组数据的name值一致。

let options = {tooltip: {show: true,triggerOn: "click",formatter: `{b}的人数是{c}人`,},toolbox: {show: true,feature: {saveAsImage: {show: true,},restore: {show: true,},dataView: {show: true,},magicType: {type: ["line", "bar"],},dataZoom: {show: true,},},},xAxis: {data: ["可口可乐", "百事可乐", "芬达", "红牛", "加多宝", "哇哈哈"],},yAxis: {},legend:{show:true,data:["1月份销量","2月份销量","3月份销量"]},series: [{name: "1月份销量",type: "bar",data: [10, 10, 35, 30, 10, 5],itemStyle: {color: "#0cc",shadowBlur: 15,opacity: 0.8,shadowOffsetX: 15,},barWidth: 15,},{name: "2月份销量",type: "bar",data: [20, 5, 65, 20, 15, 25],itemStyle: {color: "#cfc",shadowBlur: 15,opacity: 0.8,shadowOffsetX: 15,},barWidth: 15,},{name: "3月份销量",type: "bar",data: [25, 15, 95, 20, 25, 35],itemStyle: {color: "#0a8",shadowBlur: 15,opacity: 0.8,shadowOffsetX: 15,},barWidth: 15,},],};

三、折线图

1、基本配置

import * as echarts from 'echarts'
export default {mounted(){let options={title:{text:'最近1小时访问情况'},xAxis:{data:['16:00','16:05','16:10','16:15','16:20','16:25','16:30','16:35','16:40','16:45','16:50','16:55']},yAxis:{},series:[{name:'访问量',type:'line',data:[40,39,30,40,50,40,30,20,80,20,15,32]}]}let chart=echarts.init(this.$refs.box)chart.setOption(options)}
}

2、常见效果设置

<template><div ref="box" class="chart"></div>
</template><script>
import * as echarts from 'echarts'
export default {mounted(){let options={title:{text:'最近1小时访问情况'},xAxis:{data:['16:00','16:05','16:10','16:15','16:20','16:25','16:30','16:35','16:40','16:45','16:50','16:55']},yAxis:{},legend:{data:['浏览量','访问量']},tooltip:{show:true,trigger:'axis'},series:[{name:'浏览量',type:'line',data:[40,39,30,40,50,40,30,20,50,20,15,32],smooth:true,//开启平滑曲线areaStyle:{color:'rgba(159,216,255,.9)' //填充区域颜色},lineStyle:{ //线条样式设置color:'rgba(159,216,255)', width:2},symbol:'none' //去掉线条小圆点},{name:'访问量',type:'line',data:[20,19,10,20,25,20,15,10,22,10,9,16],smooth:true,areaStyle:{color:'rgba(120,215,190,.9)'},symbol:'none'}]}let chart=echarts.init(this.$refs.box)chart.setOption(options)}
}
</script><style>.chart{width: 1000px;height: 400px;}
</style>

四、饼状图

1、基本设置

<template><div><div ref="box" class="chart"></div></div>
</template><script>
import * as echarts from 'echarts' 
export default {mounted(){let options={series:[{type:'pie',data:[{name:'口碑',value:815},{name:'知乎',value:515},{name:'百度',value:115},{name:'美团',value:45},{name:'地图',value:15},]}]}let chart=echarts.init(this.$refs.box)chart.setOption(options)}
}
</script>

2、常见效果设置

<script>
import * as echarts from "echarts";
export default {mounted() {let options = {series: [{type: "pie",data: [{ name: "口碑", value: 815 },{ name: "知乎", value: 515 },{ name: "百度", value: 115 },{ name: "美团", value: 45 },{ name: "地图", value: 15 },],label: {show: true,formatter: function (arg) {return (arg.name + "部分消费了" + arg.value + "元\n" + arg.percent + "%");},},radius:['60%','80%'],//内外径占比roseType: "radius",//以扇形圆心角比例展现selectedMode: "single",//选中的模式},],};let chart = echarts.init(this.$refs.box);chart.setOption(options);},
};
</script>

五、地图

1、基本设置

地图数据的下载地址：DataV.GeoAtlas地理小工具系列

打开网址，通过右下角JSON API下载数据

在src/assets/data/chinaMap.js中存储数据

export const mapData=数据

在组件中

<template><div class="chart" ref="box" style="width:1000px;height:800px"></div>
</template><script>
import * as echarts from "echarts";
import { mapData } from "../assets/data/chinaMap.js";
export default {mounted() {//地图注册echarts.registerMap("chinaMap", mapData);let options = {geo: {//地理坐标系属性type: "map",map: "chinaMap",itemStyle:{areaColor:'#ddf',opacity:.7}zoom: 5,roam:true,label:{show:true,fontSize: 10},},visualMap: {//是视觉映射组件，用于进行视觉编码，也就是将数据映射到视觉元素(视觉通道)min: 100,max: 3000,text: ["高", "低"],realtime: false,calculable: true,inRange: {//颜色过渡color: ["lightskyblue", "yellow", "orangered"],},},series: [{name: "最小风险指数",type: "map",geoIndex: 0,data: [{ name: "北京市", value: 15477.48 },{ name: "天津市", value: 31686.1  },{ name: "上海市", value: 21686.1  },{ name: "重庆市", value: 61686.1  },{ name: "河北省", value: 81686.1  },{ name: "陕西省", value: 800  },{ name: "河南省", value: 100  },],},],};let chart = echarts.init(this.$refs.box);chart.setOption(options);},
};
</script><style>
.chart {width: 800px;height: 800px;
}
</style>

2、显示南海诸岛

如果要让南海诸岛显示出来，可以在注册地图的时候，把registerMap()的第一个参数必须设置为china就可以显示了

 echarts.registerMap("china", mapData);