1. 折线图
这个图形需要自己调节grid的位置，需要添加区域阴影，需要线变成平滑
grid的位置就是
"grid": {
"borderWidth": 0,
"top": 50,
x: 50,
y: 15,
x2: 5,
y2: 20,
height: 150,
textStyle: {
color: "#daa520"
}
}
这一小段配置就是来处理grid的地方，
"tooltip": {
"trigger": "axis",
formatter: function (params, ticket) {
console.log(params);
var res = "区域" + ' : ' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
return res;
}
}
这一段是鼠标悬停在图像上显示的内容，这里的内容是自己处理的，也可以使用默认的。
itemStyle: {
color: {
type: 'liner',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: '#ffffff' // 0% 处的颜色
},
{
offset: 0.2,
color: '#7EC5FF'
},
{
offset: 0,
color: '#0099FF' // 100% 处的颜色
}],
globalCoord: false
},
},
这一段代码在2.x中是可以实现区域颜色处理的，但是在3.x中这样写是不会出现阴影的，需要
areaStyle: {
color: {
type: 'liner',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: '#ffffff' // 0% 处的颜色
},
{
offset: 0.2,
color: '#99FEE0'
},
{
offset: 0,
color: '#61D1B5' // 100% 处的颜色
}],
globalCoord: false
},
},
在3.x中这样才会出现阴影，在2.x中折线图的legend线的颜色是默认与折线的颜色相同的，但是在3.x不是的，需要自己在配置项中添加颜色数组color:[1,2,3],这样写legend的线才会颜色与折线的颜色相同
2.柱状图
还是颜色的问题，先说2.x，在2.x中柱子的颜色可以像下面这样写，但是在3.x中不可以
itemStyle: {
color: "#61D1B5",
},
在3.x中下面加了一个normal才可以。
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#0299FF' // 0% 处的颜色
}, {
offset: 1,
color: '#86E5FF' // 100% 处的颜色
}], false),
barBorderRadius: [15, 15, 15, 15],
},
}
上面这两个都是堆叠柱状图。
3. 词云
说实话这个词是我第一次听说，特意查了一下。本来自己是用js，写了一段代码，实现一个菱形，然后元素按照一定的规律进行定位，显示的文字随机加粗字体大小变大添加阴影。我就暂时叫菱形词云好了。这是我自己写的，然后看了echarts社区里面有个搞得词云，我想和我要的差不错，我就试了一下，果然挺好用
这是我自己写的
