用eChars插件在DW中绘制图表

最新推荐文章于 2023-02-25 17:06:20 发布

武候邢

最新推荐文章于 2023-02-25 17:06:20 发布

阅读量1.3k

点赞数

文章标签： eCharts

本文链接：https://blog.csdn.net/weixin_44543131/article/details/89363128

版权

本文介绍了如何在Dreamweaver（DW）中利用eCharts插件创建图表。首先，需要引用eCharts并设置一个div作为图表容器，通过CSS调整样式。接着，通过JavaScript初始化eCharts实例，指定配置项和数据，包括标题、坐标轴和图例等。最后，将配置项和数据应用到div中，完成折线图的绘制。按照步骤操作后，即可在浏览器中看到完成的折线图。

摘要由CSDN通过智能技术生成

1：引用eChars插件，然后设置一个div盒子接收图表，给这个div盒子设置一个类，方便设置css，顺便再设置一个ID，因为这样方便等下获取它，给这个类宽度设置60%，高度为400px，离上边距5%，左右各为20%，再设置一个1px实线黑色的边框
装eChars图表的盒子效果截图：
在这里插入图片描述
2：设置完css盒子样式以后，自然就是去js中绘制图表，绘制图片有三步：第一步、先初始化eCharts实例：比如定义一个变量来接收刚刚设置的那个ID：
定义接收ID的变量截图：

3：第二步、指定图表的配置项和数据：再定义一个变量来放配置项和数据，比如放一个title标题组件，在标题组件里面放一个主标题，名称随便弄一个，然后让它靠左上角显示，再把它的字体设大一点，因为我们设置的折线图，所以是坐标轴触发，接下来弄个图例组件什么的，折线图肯定是有X轴和Y轴的，先给他X轴起一个名称，在坐标轴尾部显示，再设置一些段落，接下来Y轴的设置也差不多是这样，再设置图表里面的数据
定义放配置项和数据的变量截图：