<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./node_modules/echarts/dist/echarts.js"></script><style>#app {width: 600px;height: 300px;}</style></head><body><div id="app"></div> 放置生成的数据表<script>var div = document.querySelector("#app");var myChart = echarts.init(div); 初始化echarts实例var arr = [{name: "Direct",Mon: 320,Tue: 302,Wed: 301,Thu: 334,Fri: 390,Sat: 330,Sun: 320,},{name: "Mail Ad",Mon: 120,Tue: 132,Wed: 301,Thu: 334,Fri: 390,Sat: 330,Sun: 320,},{name: "Affiliate Ad",Mon: 220,Tue: 182,Wed: 301,Thu: 334,Fri: 390,Sat: 330,Sun: 320,},{name: "Video Ad",Mon: 150,Tue: 212,Wed: 301,Thu: 334,Fri: 390,Sat: 330,Sun: 320,},{name: "Search Engine",Mon: 820,Tue: 832,Wed: 301,Thu: 334,Fri: 390,Sat: 330,Sun: 320,},];指定图表的配置项和数据option = {tooltip: {trigger: "axis",axisPointer: {// Use axis to trigger tooltiptype: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'},},legend: {data:arr.map(item=>item.name),},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: {type: "value",},yAxis: {type: "category",data: Object.keys(arr[0]).filter(item=>item!=="name"),},series: arr.map(item=>{return {name: item.name,type: "bar",stack: "total",label: {show: true,},emphasis: {focus: "series",},data:Object.keys(item).filter(t=>t!="name").map(prop=>item[prop]),}}),};使用刚指定的配置项和数据显示图表myChart.setOption(option);</script></body>
</html>1.绘制k线图
（1）首先，k线图是什么呢？
K线图(Candlestick chart)源处于日本德川幕府时代，它是被当时日本的米市商人用来记录米市的行情与价格波动，因为其独到的标画方式而被引入到股市及期货市场。所有的投资者都可以根据K线的实体的阴阳，上下影线的长短等，来判断多空双方力量的对比和后市的走向。
K线图由开盘价、收盘价、最高价和最低价组成。如果当开盘价比收盘价低，称为收阳，这条K线称为阳线，反之开盘价比收盘价高，就称为阴线。
（2）然后看案例
本文发布于:2024-01-29 16:12:52，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170651597416501.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
