要想实现echarts图,首先第一步就要引入echarts.js文件,当然echarts.js获取的方式多种,看个人喜好吧。我是从Github上下载的,地址:https://github.com/apache/incubator-echarts/tree/4.8.0
打开下载完成的压缩包,解压后找到dist文件,就能看到相关的echarts.js文件
把echarts.js文件复制到项目目录下,开启echarts项目吧
1.引入echarts.js(其实echarts.js和echarts.min.js引入其中任何一个都可以)
2.写一个包裹echarts图标的容器标签
最后运行的效果图如下图所示:
当然有时候根据项目效果不同,需要我们对原始展示出来的echarts图修改相关的样式,例如图标横轴和纵轴上的数据大小和字体颜色,还有线条的粗细调整及颜色的更换等等
项目中有时候整体的背景颜色使用的是黑色的,看起来效果不是很好,如图所示:
修改一:title文字颜色
修改二:图例样式
修改三、x轴上的名称和data数据的字体颜色、字体大小
修改四、x轴上的名称和data数据的字体颜色、字体大小
修改五、折线图线条的颜色和粗细
修改六、图例线条颜色和折线图上的颜色一致
综上修改后,最后效果图展示如下:
echarts图的实现过程及相关样式的修改
最新推荐文章于 2023-11-16 22:22:12 发布