很多人都羡慕echarts 的那种效果图啊，好炫酷好厉害啊...；当年我老师讲的一句：这有什么难得，砸门也能做，没什么大不了的.
1 echars 简单引入和使用
npm install echarts --save
或者说 其他的引入方式
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
引入完成就是给 echarts 初始化挂载在一个 dom 元素上；
<div ref="chart" class="chart">
然后在生命周期内获取（mounted）
this.chart = echarts.init(this.$refs.chart); // 挂到data方便调用
this.getChart();
然后随便去 echarts 的官网找个例子
let data = [{ name: "常规", value: 175.17 }, { name: "紧急", value: 148.35 }, { name: "疑难", value: 99.36 }, { name: "特别难啊", value: 182.31 }];
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = ["#02c3f1", "#53e568", "#a154e9","#ea2350"];
let barBottomColor = ["rgba(2,195,241,0.1)", "rgba(83, 229, 104, 0.1)", "rgba(161, 84, 233, 0.1)","rgba(234,35,80,0.2)"];
data.forEach(item => {
xAxisData.push(item.name);
seriesData1.push(item.value);
sum += item.value;
});
const option = {
backgroundColor: '#061326',
title: {
text: '多色立体圆柱',
top:20,
left:'center',
textStyle:{
color:'#fff',
fontSize:20
}
},
grid:{
top:'25%',
bottom:'15%'
},
xAxis: {
data: xAxisData,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
margin: 25,
align: 'center',
formatter: function(params, index) {
return '{a|' + (seriesData1[index] / sum * 100).toFixed(2) + '%}' + '\n' + '{b|' + params + '}';
},
textStyle: {
fontSize: 14,
color: '#ffffff',
rich: {
a: {
fontSize: 12,
color: '#ffffff'
},
b: {
height: 20,
fontSize: 14,
color: '#ffffff'
}
}
}
},
interval: 0
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
name: '柱顶部',
type: 'pictorialBar',
symbolSize: [26, 10],
symbolOffset: [0, -5],
z: 12,
itemStyle: {
normal: {
color: function(params) {
return barTopColor[params.dataIndex];
}
}
},
label: {
show: true,
position: 'top',
fontSize: 16
},
symbolPosition: 'end',
data: seriesData1,
}, {
name: '柱底部',
type: 'pictorialBar',
symbolSize: [26, 10],
symbolOffset: [0, 5],
z: 12,
itemStyle: {
normal: {
color: function(params) {
return barTopColor[params.dataIndex];
}
}
},
data: seriesData1
}, {
name: '第一圈',
type: 'pictorialBar',
symbolSize: [47, 16],
symbolOffset: [0, 11],
z: 11,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#3ACDC5',
borderWidth: 2
}
},
data: seriesData1
}, {
name: '第二圈',
type: 'pictorialBar',
symbolSize: [62, 22],
symbolOffset: [0, 17],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: barTopColor[0],
borderWidth: 2
}
},
data: seriesData1
}, {
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
return new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{ offset: 1, color: barTopColor[params.dataIndex]
},
{
offset: 0,
color: barBottomColor[params.dataIndex]
}
]
);
},
opacity: 0.8
}
},
z: 16,
silent: true,
barWidth: 26,
barGap: '-100%', // Make series be overlap
data: seriesData1
}]
};
this.chart.setOption(option); // 最重要的一步！，就是这个只有setOption才会生效。
上面是配置项，自己觉得哪个好看自己引入 option 即可
2 echarts 的深入了解一下
很多时候需要多重复合，例如： 柱状图+折线图，或者折线图+散点图， 地图+柱状图，环形图 3D 效果等...一些复杂的效果的时候往往不知所措，没关系，今天给你讲讲一个典型的案例： 柱状图+折线图(外加渐变色)
这里讲的都是option 的配置，如果觉得讲的不好略过咯;
先讲 xAxis，一般来说都是X轴的东西，X轴显示什么，或者什么时候显示，颜色（渐变色），效果，都是在这里；一般都是对象： X轴可以是对象，可以是数组，
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
xAxis: [{
type: 'category', // X轴的坐标类型 有四种 ‘value’，‘log’，‘time’，‘category’；自己看着写
axisLine: { // 这个啊就是显示X轴的线条显示不显示，或者粗细长短，颜色等
show: true
},
// 坐标轴标签
fontSize: 4,
align: 'center', //居中方式
splitArea: { // 分割区域 颜色显示等等
// show: true,
color: '#f00',
lineStyle: {
color: '#f00'
},
},
axisLabel: { // 来了这个是X轴的重点，主要有文字显示，颜色，等，还支持传入不同的参数
// 如： 当X1的时候我加一个数字‘1’，X2的时候加一个数字2也是可以的
主要就是这个formatter
color: '#fff',
formatter: function(params, index) {
// 这里的params, index代表着 这个X当前每个 X显示的名字， 和index 下标
// 支持返回字符串， 和一个HTML 字符串，需要显示什么样式或者格式都可以在这执行，我这里就是为了将百分比和文字区分，做了一些操作，如有需求请自行操作
return '{a|' + (seriesData1[index] / sum * 100).toFixed(2) + '%}' + '\n' + '{b|' + params + '}';
}
},
splitLine: { // 坐标分隔线间隔
show: false
},
data: ['A', 'B', 'C', 'D', 'E', 'F'], //这最重要，就是X轴上面显示哪些数据，都是在这里传入的切记；如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便, 可以注释
}],
如图所示，这个就是X轴的扫尾简单配置啦
因为Y 轴 的 yAxis 和x 轴一样就不说X轴的配置了，先略过，讲其他的
dataZoom 这个可以玩的很溜哦，这个就是一页显示多少个、从哪里开始显示，显示的方式是怎么样的。这个算是很强大的一个属性
官方解释——组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
dataZoom: {
type: 'inside', // 这个就是让你显示平移或者 缩放的一个东西
xAxisIndex: 0, //控制X轴， 数字代表控制几个的意思， 因为我们是要进行从右往左轮播的循环播放，所以，只是X轴的移动即可
// yAxisIndex: 0, // 这里跟x 轴同理， 因为业务不需要所以不想控制Y 轴移动；
//filterMode : , // 这个是数据过滤用的，这里用不到，所以把它注释了，他有四种过滤方式，四种不显示过的内容，这里业务不用
startValue: 0, // 这里是从哪里开始控制，传入2就是从第三个开始控制显示
endValue: 5, // 这能让当前组件显示几个的意思，一般来说传入0即为 控制失效的意思，
},
tooltip 这个是显示弹窗的，一般来说就是显示提示框内容的
tooltip: {
trigger: 'axis', // 这个根据那种类型触发的提示框
axisPointer: { // 坐标轴指示器配置项。
type: 'shadow', // 提示的时候有个阴影 阴影指示器还有其他类型
shadowStyle: { // 阴影的样式配置;
color: 'rgba(100,100,300, 0.1)',
},
},
},
// 另一种tooltip 的显示方式；Params 这个就是当前提示框的内容啦，简单的很
// 其实只要是 formatter 这个东西都 可以有两种返回方式，一定要return哦， 支持纯属的字符串，还有HTML的字符串啦
tooltip: {
formatter: function (params) {
return '<span style="color: #fff;">'+ getvalue + '%</span>';
}
},
series
重头戏，这就是最厉害的一个啦；如果你想混合一起写，没问题，所有的操作都是在这进行的 这里传入的数组对象， 如果只有一个或者一种类型，那么就是只有一个对象，如果有多个就是多个对象； 还有上面说的那些都是通用的，对象内可以将上面的那些再传一次，这个就是显示当前样式的，只在这个里面生效； 这个，里面都是私有，仅仅当前数据显示有效，外面共有的代码如果和内部冲突，优先显示内部代码的样式; 这里主要是重点将一些配置，而已；下期更新再重点单独更新这个；。反正这里传入的对象，只要把私有的配置想好写好，单独一个样式呢。就可以混合使用啦
最后上代码
let data = [{ name: "常规", value: 175.17 }, { name: "紧急", value: 148.35 }, { name: "疑难", value: 99.36 }, { name: "特别难啊", value: 182.31 }];
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = ["#02c3f1", "#53e568", "#a154e9","#ea2350"];
let barBottomColor = ["rgba(2,195,241,0.1)", "rgba(83, 229, 104, 0.1)", "rgba(161, 84, 233, 0.1)","rgba(234,35,80,0.2)"];
data.forEach(item => {
xAxisData.push(item.name);
seriesData1.push(item.value);
sum += item.value;
});
const option = {
backgroundColor: '#061326',
title: {
text: '多色立体圆柱',
top:20,
left:'center',
textStyle:{
color:'#fff',
fontSize:20
}
},
grid:{
top:'25%',
bottom:'15%'
},
xAxis: {
data: xAxisData,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
margin: 25,
align: 'center',
formatter: function(params, index) {
return '{a|' + (seriesData1[index] / sum * 100).toFixed(2) + '%}' + '\n' + '{b|' + params + '}';
},
textStyle: {
fontSize: 14,
color: '#ffffff',
rich: {
a: {
fontSize: 12,
color: '#ffffff'
},
b: {
height: 20,
fontSize: 14,
color: '#ffffff'
}
}
}
},
interval: 0
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
tooltip: {
trigger: 'axis', // 这个根据那种类型触发的提示框
axisPointer: { // 坐标轴指示器配置项。
type: 'shadow', // 提示的时候有个阴影 阴影指示器还有其他类型
shadowStyle: { // 阴影的样式配置;
color: 'rgba(100,100,300, 0.1)',
},
},
},
series: [{
name: '柱顶部',
type: 'pictorialBar',
symbolSize: [26, 10],
symbolOffset: [0, -5],
z: 12,
itemStyle: {
normal: {
color: function(params) {
return barTopColor[params.dataIndex];
}
}
},
label: {
show: true,
position: 'top',
fontSize: 16
},
symbolPosition: 'end',
data: seriesData1,
}, {
name: '柱底部',
type: 'pictorialBar',
symbolSize: [26, 10],
symbolOffset: [0, 5],
z: 12,
itemStyle: {
normal: {
color: function(params) {
return barTopColor[params.dataIndex];
}
}
},
data: seriesData1
}, {
name: '第一圈',
type: 'pictorialBar',
symbolSize: [47, 16],
symbolOffset: [0, 11],
z: 11,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#3ACDC5',
borderWidth: 2
}
},
data: seriesData1
}, {
name: '第二圈',
type: 'pictorialBar',
symbolSize: [62, 22],
symbolOffset: [0, 17],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: barTopColor[0],
borderWidth: 2
}
},
data: seriesData1
}, {
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
return new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{ offset: 1, color: barTopColor[params.dataIndex]
},
{
offset: 0,
color: barBottomColor[params.dataIndex]
}
]
);
},
opacity: 0.8
}
},
z: 16,
silent: true,
barWidth: 26,
barGap: '-100%', // Make series be overlap
data: seriesData1
},
{
name: '注册总量',
type: 'line',
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 25,
lineStyle: {
normal: {
color: "#6c50f3",
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#6c50f3',
}
},
itemStyle: {
color: "#6c50f3",
borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: false
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(108,80,243,0.3)'
},
{
offset: 1,
color: 'rgba(108,80,243,0)'
}
], false),
shadowColor: 'rgba(108,80,243, 0.9)',
shadowBlur: 20
}
},
data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
},
{
name: '注册总量',
type: 'line',
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 25,
lineStyle: {
normal: {
color: "#00ca95",
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#00ca95',
}
},
itemStyle: {
color: "#00ca95",
borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
], false),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20
}
},
data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
},
]
};
缘故今天就不弄一个echarts的从右到左的移动了；明天我们再接着写，明天再努力更新；加油
3 小结
其实说真的echarts 配置真的不难，难得只是认知上的改变，不要觉得没做过就是不好做难； 只要功夫深，铁柱磨成针； 有些人一看就懂，你看半天；99%的汗水其实真的比不上1%的天赋，那还不好好学习？
