visual制作一个网站教程(visualstudio制作网站)

2024-04-29 分类：网站建设

ECharts 怎么安装?echarts 是js代码 , 本身是属于网页运行的代码 , 平时使用 , 我们只需要把它引入使用

即可 .

但是如果你不了解js代码 , 也不明白怎么编辑js代码 , 那么下面这些基础知识 , 希望你能一并了解.

html文件怎么编辑怎么打开?

https://jingyan.baidu.com/article/fedf0737e691b935ad897754.html

如何修改默认打开html文件的浏览器

https://jingyan.baidu.com/article/fec4bce2941232f2618d8b15.html

vscode 下载地址

https://code.visualstudio.com/download

怎么安装vscode

https://guohaomeng.github.io/post/yong-vscode-xie-wang-ye-ji-chu-an-zhuang-pian/

怎么使用vscode编辑html文件

https://cloud.tencent.com/developer/article/1785077

当然如果你是专业人士 , 可以跳过上面的基础知识 .

如果你对源代码进行修改有需要 , 那么也可以去官方开源地址下载对应的源码进行编译 .

源码可以在官网 https://echarts.apache.org/zh/download.html 下载

也可以在 github上 https://github.com/apache/echarts/releases 下载

Echarts 折线图教学通过标签方式直接引入

构建好的 echarts

<html> <head> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/echarts/5.0.2/echarts.min.js"></script> </head> <body> <div id="chart_id" style="width: 100%; height: 100%">头条@新浪潮</div> </body> <script> var myChart = echarts.init(document.getElementById("chart_id")); //option 里面很复杂的项必须对着官方的配置文档来配置 , //https://echarts.apache.org/zh/option.html var option = { tooltip: { trigger: "axis" }, xAxis: { type: "category", data: ["x轴1", "x轴2", "x轴3", "x轴4", "x轴5", "x轴6", "x轴7"], }, yAxis: { type: "value", }, series: [ { data: [480, 738, 901, 934, 1890, 1330, 1380], type: "line", smooth: true, }, ], }; myChart.setOption(option); </script></html>

配置表怎么用 , 我举几个常见的例子

例子一 : echarts折线图的点怎么去掉?

思路打开 , 先找到折线的配置项 , 然后去找点的配置项 , 然后把点给隐藏了 .

建议放大仔细看

下面落实到实际:

<html> <head> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/echarts/5.0.2/echarts.min.js"></script> </head> <body> <div id="chart_id" style="width: 100%; height: 100%">头条@新浪潮</div> </body> <script> var myChart = echarts.init(document.getElementById("chart_id")); var option = { tooltip: { trigger: "axis" }, xAxis: { type: "category", data: ["x轴1", "x轴2", "x轴3", "x轴4", "x轴5", "x轴6", "x轴7"], }, yAxis: { type: "value", }, series: [ { data: [480, 738, 901, 934, 1890, 1330, 1380], type: "line", smooth: true, //把点隐藏的代码 symbol: "none", //把点隐藏的代码 }, ], }; myChart.setOption(option); </script></html>

修改了一点点代码成功把点消灭

例子二 : echarts折线图如何显示数值?

思路打开 , 先找到折线的配置项 , 然后去找标签的配置项 , 然后把标签显示出来 .

思路对了一招鲜

<html> <head> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/echarts/5.0.2/echarts.min.js"></script> </head> <body> <div id="chart_id" style="width: 100%; height: 100%">头条@新浪潮</div> </body> <script> var myChart = echarts.init(document.getElementById("chart_id")); var option = { tooltip: { trigger: "axis" }, xAxis: { type: "category", data: ["x轴1", "x轴2", "x轴3", "x轴4", "x轴5", "x轴6", "x轴7"], }, yAxis: { type: "value", }, series: [ { data: [480, 738, 901, 934, 1890, 1330, 1380], type: "line", smooth: true, //标签显示代码 label: { show: true, }, //标签显示代码 }, ], }; myChart.setOption(option); </script></html>

修改了一点点代码成功把标签显示出来了

持续学习官方的例子

官方的例子 https://echarts.apache.org/examples/zh/index.html 很丰富 , 也很具有代表性 , 大家也可以在线对官方例子的数据进行编辑 , 可视化其实很简单 , 逐渐摸索慢慢的就会熟悉啦 .

分享文章：visual制作一个网站教程(visualstudio制作网站)
转载注明：https://www.cdcxhl.com/news49/325999.html

成都网站建设公司_创新互联，为您提供微信小程序、关键词优化、微信公众号、域名注册、软件开发、定制开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容