也可以啊,比如我要集成如下的一个样式:
https://www.makeapie.cn/echarts_content/xXbP45bsC.html
先选中折线图,并按照连接中的绑定两个数据:
然后复制makeapie中的全部代码
并将option = {**}
改成let myoption = {**}
截图如下:
然后在最后只替换数据和分类,然后删除一些全局属性即可,并返回自己的myOption:
实现代码如下:
- let myOption = {
- backgroundColor: '#080b30',
- title: {
- text: '哎呦,不错哦',
- textStyle: {
- align: 'center',
- color: '#fff',
- fontSize: 20,
- },
- top: '5%',
- left: 'center',
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: 'rgba(0, 255, 233,0)'
- }, {
- offset: 0.5,
- color: 'rgba(255, 255, 255,1)',
- }, {
- offset: 1,
- color: 'rgba(0, 255, 233,0)'
- }],
- global: false
- }
- },
- },
- },
- grid: {
- top: '15%',
- left: '5%',
- right: '5%',
- bottom: '15%',
- // containLabel: true
- },
- xAxis: [{
- type: 'category',
- axisLine: {
- show: true
- },
- splitArea: {
- // show: true,
- color: '#f00',
- lineStyle: {
- color: '#f00'
- },
- },
- axisLabel: {
- color: '#fff'
- },
- splitLine: {
- show: false
- },
- boundaryGap: false,
- data: ['A', 'B', 'C', 'D', 'E', 'F'],
- }],
- yAxis: [{
- type: 'value',
- min: 0,
- // max: 140,
- splitNumber: 4,
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255,255,255,0.1)'
- }
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- margin: 20,
- textStyle: {
- color: '#d1e6eb',
- },
- },
- axisTick: {
- show: false,
- },
- }],
- series: [{
- 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: {
- 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',
- showAllSymbol: true,
- 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: false
- },
- areaStyle: {
- normal: {
- shadowColor: 'rgba(0,202,149, 0.9)',
- shadowBlur: 20
- }
- },
- data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
- },
- ]
- };
- myOption.xAxis[0].data = option.xAxis.data
- myOption.series[0].data = option.series[0].data;
- myOption.series[1].data = option.series[1].data;
- return myOption;
复制代码 这样就可以很快的集成一个echarts的图表了
|