echarts中文说明（ECharts-可视化入门教程）
echarts中文说明（ECharts-可视化入门教程）怎么安装vscode https://code.visualstudio.com/download 如何修改默认打开html文件的浏览器 https://jingyan.baidu.com/article/fec4bce2941232f2618d8b15.html vscode 下载地址
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 很丰富 也很具有代表性 大家也可以在线对官方例子的数据进行编辑 可视化其实很简单 逐渐摸索慢慢的就会熟悉啦 .
