Echarts-基础配置
此项目网盘地址链接：https://pan.baidu.com/s/15C6ubmQ1U–nOkfXbkJoIQ 提取码：beya
拿到之后打开，npm install即可
根据项目简单总结了一下。如有问题留言交流指正！
echars安装之类的不细说，看官网文档即可！
需要了解的主要配置：
seriesxAxisyAxisgridtooltiptitlelegendcolor
-
series
- 系列列表。每个系列通过
type决定自己的图表类型 - 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
- 系列列表。每个系列通过
-
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
-
yAxis：直角坐标系 grid 中的 y 轴
-
grid：直角坐标系内绘图网格。
-
title：标题组件
-
tooltip：图标中节点提示框，看配置文档中，trigger是触发方式，axis是折线形状，item是散点和柱状图
-
legend：图例组件（表头内容）
-
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的
stack值后 后一个系列的值会在前一个系列的值上相加。以下看我项目中的样例：
var myChart = this.$echarts.init(this.$refs.chartleft1);
// 指定配置和数据
var option = {
color: ["#2f89cf"],//柱子颜色，有几种柱子写几种，也可以在series中，对于每个柱子配置中单独配置颜色
//提示框内容
tooltip: {
//'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
//'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线line，可改为'shadow'，出现阴影
}
},
//图表内容区位置
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
//containLabel 为 true 的时候,以上确定图表位置时候包括了坐标标签
containLabel: true
},
//X轴设置
xAxis: [{
type: "category", //坐标轴类型通用两种：category类目，value是数值形
data: [
"旅游",
"教育",
"游戏",
"医疗",
"电商",
"社交",
"金融"
],
//坐标轴刻度相关设置。
axisTick: {
alignWithLabel: true //刻度不显示
},
//坐标轴标签设置
axisLabel: {
color: "rgba(255,255,255,.6)", //颜色
fontSize: "12" //字迹大小
},
// 坐标轴线设置
axisLine: {
show: false //是否显示坐标轴轴线。
}
}],
//Y轴坐标轴设置
yAxis: [{
type: "value",
axisLabel: {
//指Y轴标签文本的样式，不知道为什么X轴没有textStyle，而是直接里边的内容，文档是这么干的
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12",
}
},
//Y轴线样式设置
axisLine: {
lineStyle: {
color: "rgba(255,255,255,1)",
width: 1,
}
},
//Y轴分隔线样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
//系列列表
series: [{
name: "直接访问",
//柱状类型为bar，线条为line，pie为饼图，radar为雷达...
type: "bar",
//柱子宽度
barWidth: "35%",
//数据：内容数组。数组项通常为具体的数据项。
data: [200, 300, 300, 900, 1500, 1200, 600],
//柱子样式
itemStyle: {
//圆角为5
barBorderRadius: 5
}
}]
};
// 把配置给实例对象
myChart.setOption(option);
//自适应大小
window.addEventListener("resize", function () {
myChart.resize();
});
// 准备数据
var data = {
year: [
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
]
};
//指定配置和数据
var option = {
color: ["#00f2f1", "#ed3f35"],
tooltip: { //提示框组件
// 通过坐标轴来触发
trigger: "axis",
// 默认是line所以不必要设置
},
// 图例内容
legend: {
// 距离容器10%
right: "10%",
// 修饰图例文字的颜色
textStyle: {
color: "#4c9bfd"
}
// 如果series 里面设置了name，此时图例组件的data可以省略
// data: ["新增粉丝", "新增游客"]
},
//图表内容区位置
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
show: true,
borderColor: "#012f4a",
containLabel: true
},
//X轴设置
xAxis: {
type: "category",
//boundaryGap坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
boundaryGap: false,//不留白
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
// 刻度是否显示
axisTick: {
show: false
},
// 修饰刻度标签的颜色
axisLabel: {
color: "rgba(255,255,255,.7)"
},
// 去除x坐标轴的颜色
axisLine: {
show: false
}
},
yAxis: {
type: "value",
// 去除刻度
axisTick: {
show: false
},
// 修饰刻度标签的颜色
axisLabel: {
color: "rgba(255,255,255,.7)"
},
// 修改y轴分隔线的颜色
splitLine: {
lineStyle: {
color: "#012f4a"
}
}
},
series: [{
name: "新增粉丝",
type: "line",
stack: "总量",
// 是否让线条圆滑显示
smooth: true,
data: data.year[0]
},
{
name: "新增游客",
type: "line",
stack: "总量",
smooth: true,
data: data.year[1]
}
]
};
// 3. 把配置和数据给实例对象
myChart.setOption(option);
//自适应窗口大小
window.addEventListener("resize", function () {
myChart.resize();
});
var myChart = this.$echarts.init(this.$refs.chartleft3);
// 指定配置和数据
let option = {
tooltip: {
// 提示框
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function (p) {
//其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
}
},
legend: {
// 图例标签
top: "90%",
//图例标签中方块的宽高
itemWidth: 10,
itemHeight: 10,
data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
series: [{
name: "年龄分布",
type: "pie",
//饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。也就是对于饼状图中图标的位置，不要grid来控制，是通过center
center: ["50%", "42%"],
//饼图两个圆的的半径#如果radius是百分比则必须加引号
radius: ["40%", "60%"],
color: [
"#065aab",
"#066eab",
"#0682ab",
"#0696ab",
"#06a0ab",
"#06b4ab",
"#06c8ab",
"#06dcab",
"#06f0ab"
],
// 饼图图形上的文本标签
label: {
// 不显示
show: false
//文本标签默认显示在每个扇形区域的边缘处，positon：center则改变文本位置，为中心处
},
// 标签线，连接图形和文字的一条线段，现在是false不显示
labelLine: {
show: false
},
//饼图中data数据是键值对形式，value和name，因为没有xy轴设置
data: [{
value: 1,
name: "0岁以下"
},
{
value: 4,
name: "20-29岁"
},
{
value: 2,
name: "30-39岁"
},
{
value: 2,
name: "40-49岁"
},
{
value: 1,
name: "50岁以上"
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//自适应窗口
window.addEventListener("resize", function () {
myChart.resize();
});
var myChart = this.$echarts.init(this.$refs.chartright1);
// 指定配置和数据
var data = [70, 34, 60, 78, 69];
var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
var valdata = [702, 350, 610, 793, 664];
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
var option = {
//图标位置
grid: {
top: "10%",
left: "22%",
bottom: "10%"
},
//X轴配置
xAxis: {
show: false
},
//y轴配置
yAxis: [
//第一个Y轴配置
{
show: true,
data: titlename,
//坐标轴是否反向
inverse: true,
axisLine: { //坐标线
show: false
},
splitLine: { //内容区格线
show: false
},
axisTick: { //刻度
show: false
},
axisLabel: { //刻度标签
color: "#fff",
}
},
//第二个Y轴配置
{
show: true,
inverse: true,
data: valdata,
axisLabel: {
textStyle: {
fontSize: 12,
color: "#fff"
}
}
}
],
series: [
//两个柱子，第一个是内置条，第二个作为边框
{
name: "条",
type: "bar",
//上下关系，出现层级时候直接上下分布，如果同等级则排布
yAxisIndex: 0,
data: data,
barCategoryGap: 50,
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 20,
//此函数见下分析：为了配置不同柱子的颜色
color: function (params) {
var num = myColor.length;
return myColor[params.dataIndex % num];
}
}
},
//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
normal: {
show: true,
//标签的位置，inside里边
position: "inside",
//{a}：系列名。{b}：数据名。{c}：数据值。
formatter: "{c}%"
}
}
},
{
name: "框",
type: "bar",
yAxisIndex: 1,
barCategoryGap: 50,
data: [100, 100, 100, 100, 100],
barWidth: 15,
itemStyle: {
normal: {
color: "none",
borderColor: "#00c1de",
borderWidth: 3,
barBorderRadius: 15
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
color: function (params) {
var num = myColor.length;
return myColor[params.dataIndex % num];
}
解释下这段代码
参数 params 是单个数据的集合，也就是多个对象打印结果如下图
我们打开看下内部结构，有一个dataIndex，这个是相当于我们数组的索引值，也就是我们自定义一个数组，然后里边存放颜色，我们通过索引来得到对应的颜色，这就可以使得每个柱子的颜色不一样。
var myChart = this.$echarts.init(this.$refs.chartright2);
// 指定配置和数据
var option = {
legend: {
//图例
top: "90%",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
tooltip: {
//支持字符串模板和回调函数两种形式
trigger: "item",
//又出现了，字符串模板
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 注意颜色写的位置
color: [
"#006cff",
"#60cda0",
"#ed8884",
"#ff9f7f",
"#0096ff",
"#9fe6b8",
"#32c5e9",
"#1d9dff"
],
series: [{
name: "点位统计",
type: "pie",
// 如果radius是百分比则必须加引号,饼图两个圆的的半径
radius: ["10%", "70%"],
//圆心位置横坐标和纵坐标
center: ["50%", "42%"],
roseType: "radius",
data: [{
value: 20,
name: "云南"
},
{
value: 26,
name: "北京"
},
{
value: 24,
name: "山东"
},
{
value: 25,
name: "河北"
},
{
value: 20,
name: "江苏"
},
{
value: 25,
name: "浙江"
},
{
value: 30,
name: "深圳"
},
{
value: 42,
name: "广东"
}
],
// 修饰饼形图文字相关的样式 label对象
label: {
fontSize: 10
},
// 修饰引导线样式
labelLine: {
// 连接到图形的线长度
length: 10,
// 连接到文字的线长度
length2: 10
}
}]
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option);
// 4. 当我们浏览器缩放的时候，图表也等比例缩放
window.addEventListener("resize", function () {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
var myChart = this.$echarts.init(this.$refs.chartright3);
// 指定配置和数据
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#dddc6b"
}
}
},
legend: {
top: "0%",
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12"
}
},
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
},
data: [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30"
]
},
{
axisPointer: {
show: false
},
axisLine: {
show: false
},
position: "bottom",
offset: 20
}
],
yAxis: [{
type: "value",
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}],
series: [{
name: "播放量",
type: "line",
smooth: true,
// 拐点为圆圈
symbol: "circle",
// 拐点大小
symbolSize: 5,
// 不显示，鼠标触碰上才显示
showSymbol: false,
// 拐点的样式
itemStyle: {
normal: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
}
},
// 线条样式
lineStyle: {
normal: {
color: "#0184d5",
width: 2
}
},
//重要部分，区域填充
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(1, 132, 213, 0.4)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(1, 132, 213, 0.1)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
// 老式写法
// color: new this.$echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [{
// offset: 0,
// color: "rgba(1, 132, 213, 0.4)"
// },
// {
// offset: 0.8,
// color: "rgba(1, 132, 213, 0.1)"
// }
// ],
// false
// ),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: [
30,
40,
30,
40,
30,
40,
30,
60,
20,
40,
20,
40,
30,
40,
30,
40,
30,
40,
30,
60,
20,
40,
20,
40,
30,
60,
20,
40,
20,
40
]
},
{
name: "转发量",
type: "line",
smooth: true,
// 拐点设置
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
normal: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
}
},
// 以上是拐点设置
lineStyle: {
normal: {
color: "#00d887",
width: 2
}
},
areaStyle: {
normal: {
// 这是之前老式写法
// 现在文档配置更改了,见上方
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: [
50,
30,
50,
60,
10,
50,
30,
50,
60,
40,
60,
40,
80,
30,
50,
60,
10,
50,
30,
70,
20,
50,
10,
40,
50,
30,
70,
20,
50,
10,
40
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
})
这个有关地图的，需要先把china.js也就是中国地图下载下来，然后才能显示出效果，刚开始的时候也折腾了半天，我后边打包项目网盘里边都有直接获取
var myChart = this.$echarts.init(this.$refs.chartcenter);
// 2. 指定配置和数据
// 2. 指定配置和数据
var geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
var XAData = [
[{
name: "西安"
}, {
name: "北京",
value: 100
}],
[{
name: "西安"
}, {
name: "上海",
value: 100
}],
[{
name: "西安"
}, {
name: "广州",
value: 100
}],
[{
name: "西安"
}, {
name: "西宁",
value: 100
}],
[{
name: "西安"
}, {
name: "拉萨",
value: 100
}]
];
var XNData = [
[{
name: "西宁"
}, {
name: "北京",
value: 100
}],
[{
name: "西宁"
}, {
name: "上海",
value: 100
}],
[{
name: "西宁"
}, {
name: "广州",
value: 100
}],
[{
name: "西宁"
}, {
name: "西安",
value: 100
}],
[{
name: "西宁"
}, {
name: "银川",
value: 100
}]
];
var YCData = [
[{
name: "拉萨"
}, {
name: "北京",
value: 100
}],
[{
name: "拉萨"
}, {
name: "潍坊",
value: 100
}],
[{
name: "拉萨"
}, {
name: "哈尔滨",
value: 100
}]
];
var planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
//var planePath = 'arrow';
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ["#fff", "#fff", "#fff"]; //航线的颜色
var series = [];
[
["西安", XAData],
["西宁", XNData],
["银川", YCData]
].forEach(function (item, i) {
series.push({
name: item[0] + " Top3",
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "red", //arrow箭头的颜色
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + " Top3",
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + " Top3",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
var option = {
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
">" +
params.data.toName +
"<br />" +
params.data.value
);
} else {
return params.name;
}
}
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff"
}
},
roam: false,
// 放大我们的地图
zoom: 1.05,
itemStyle: {
normal: {
areaColor: "rgba(43, 196, 243, 0.42)",
borderColor: "rgba(43, 196, 243, 1)",
borderWidth: 1
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
series: series
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
最近几天看也是跟着B站Pink老师学习，然后他采用的是原生js和html、css写的，我改造了一下，vue封装了几个组件，还有就是pink老师自适应的时候是写死的rem，也就是宽高比例缩放有点问题，我这个是直接适应宽高，都是全屏。这是不太一样的地方，不能照搬，总要加一点自己的东西
最后呈现
echarts很强大，百度出品，必出精品。，我个人也只是皮毛，还有好多要学习，还是那句话多学多用，用多了就会了。
2562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
