echarts画k线图（折线）

引用echarts的库，写以下js文件

//k线图function makeMapKLine(result){var changeChart=echarts.init(document.getElementById("changeContent"));var mapDate=[];var goldCard=[];var sunFlowerCard=[];for(var i=0;i<result.monthPro.length;i++){mapDate.push(result.monthPro[i].month);goldCard.push(result.monthPro[i].goldCard);sunFlowerCard.push(result.monthPro[i].sunFlowerCard);  option=({title: {text: '客户总数变化',left:'center',textStyle:{color:'#fff',fontSize:'14',fontWeight:'lighter',fontFamily:'Arial',},},legend:{show:true,orient:'horizontal',bottom:40,data:[{name:'A客户',textStyle:{fontSize:12,fontWeight:'bolder',color:'#fff'},icon:'stack'},{name:'B客户',textStyle:{fontSize:12,fontWeight:'bolder',color:'#fff'},icon:'stack'}]},textStyle:{color:'#fff',fontSize:1,},tooltip: {trigger: 'axis',//axisPointer: {//    type: 'shadow'//}},backgroundColor:'#1d3a59',grid: {left: '3%',right: '3%',bottom: '30%',containLabel: true},xAxis: {data :mapDate,axisTick:{show:false},axisLine:{lineStyle:{color:'white'}},axisLabel:{color:'white',fontSize:'12',
//              margin:1,},splitLine: {show:true,lineStyle: {type: 'dashed',color:'#303640'}}},yAxis:{type:'value',                nameTextStyle:{color:'white',fontSize:'12',},axisLine:{show:false,lineStyle:{color:'white',},},axisTick:{show:false},axisLabel:{color:'white',fontSize:'12',margin:10,},splitLine: {show:true,lineStyle: {type: 'dashed',color:'white'}}},series:[{type:'line',name:'A客户',smooth:true, //数据光滑过度
//          symbol:'none', //下一个数据点lineStyle:{normal:{color:'#5693cb',width:3,}},itemStyle:{normal:{color:'#5693cb',label : {show:true,color:'white',fontSize:'12',}}},data:goldCard,},{type:'line',name:'B客户',smooth:true, //数据光滑过度
//          symbol:'none', //下一个数据点lineStyle:{normal:{color:'#ed7d31',width:3,}},itemStyle:{normal:{color:'#ed7d31',label : {show:true,color:'white',fontSize:'12',}}},data:sunFlowerCard,}],});changeChart.setOption(option)}
}

在调用接口时用数据生成echarts图。

如果没有数据，想清除K线图的显示，在setoption后加上以下代码。

$('#changeContent').find('.noDataTips').remove();$('#changeContent').append('<div class="noDataTips" style="position:absolute;top:50%; left:50%; transform:translate(-50%,-50%); font-size:40px;font-weight: 600;text-align:center;">暂无数据</div>');

echarts画k线图（折线）相关推荐

python画k线图_python画k线图
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! import datetime import pandas_datareader ...
画K线图、画N日均线 python3
记下自己的研究成果是件开心的事情,本文介绍用Python3将股票历史行情画成K线图,以及添加5日,10日,N日均线. 首先,是获取数据源,一般分两种,一是直接从财经类网站读取:二是读取本地数据文件.我 ...
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...
python 获取股市数据 baostock + 画K线图 mpl_finance
python 获取股市数据 baostock + 画K线图 mpl_finance 获取股票数据安装baostock库 baostock库的特性获取A股K线数据核心代码如下完整代码如下画K线 ...
python绘制动态k线及均线,python : pyecharts 1.1.0 画K线图
pip install pyecharts ; 会安装 pyecharts-1.1.0 画K线图 kline1.py # coding: utf-8 import os, sys from pyech ...
python能画k线图吗_python画k线图(一天的k线图怎么画)
1.大智慧软件在日线窗口的左上角标有主图的公式名称,(如ma sar bbi )等, 如果不是ma指标,请输入ma,回车.2.如果输入ma后还是没有均线,请按 f7 键,弹出最好能举个例子的.非常感 ...
使用python画K线图（蜡烛图）
#画K线图 import pandas as pd import matplotlib.pyplot as plt import mplfinance as mpf#金融画图库 from pylab ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
python画k线图_python自动获取行情数据，并画k线图
1.概述本例子为画k线图,同时画出5日,10日,30日均线,且鼠标移动到上面会显示当前交易日,开盘价,收盘价,最高价,最低价. 移动平均线:Moving Average,简称MA,MA是用统计分析的 ...

echarts画k线图（折线）

echarts画k线图（折线）相关推荐

最新文章

热门文章