当你拿到一个酷炫的echarts原型的时候,你应该怎么快速的写出来呢?是一个个的去官网的配置项去找,还是疯狂的百度,最后找不到一样的或者差不多的.
现在教你一个快速完成一个echarts的方法.
如何快速完成一个echarts
一、echarts好用的属性
1、graphic
原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group
用的比较多的是image图形元素,这个元素可以搞定你一切的背景图,背景图方面你可以不用担心
代码:
graphic: {
elements: [
// 内部图片
{
type: 'image',
z: 3,
style: {
image: 'base64图片',
width: 81,
height: 81,
},
left: 'center',
top: 'center',
position: [100, 100],
},
],
},
2、title
标题组件,包括主标题和副标题
当你需要文字展示时,在series的lable属性里面搞不定时,都可以用这个title属性,他可以随意调整位置,同时也可以自定义富文本样式,比如字体、颜色、边框等
代码:
title: {
text: '690',
top: '39%',
textAlign: 'center',
left: '48%',
textStyle: {
color: '#d7d57b',
fontSize: 18,
},
},
3、dataZoom
用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响,主要用于柱状图或者折线图,x轴数据过多
代码: