echarts图的实现过程及相关样式的修改

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

你可能感兴趣的:(echarts图的实现过程及相关样式的修改)