echarts配置及专业k线作图工具

傷城~ 2022-05-20 04:07 409阅读 0赞

**一般看官网配置比较多，教大家如何copy完线性图代码，快速更改配置。**

**echerts线图常用配置：**

grid: [{
    		left: '0%',
    		right: '5%',
    		top: '5%',
    		height: '80%',
    		containLabel: false
    	},
    	{
    		left: '10%',
    		right: '8%',
    		bottom: '15%',
    		height: '15%'
    	}
    ]

grid下边的left代表的是曲线图的具体位置，自己可以试一试，看有什么变化。

xAxis:[{
    type: 'category', 
     //类型，包括value（连续数据）、category（离散型）、time（时间轴）、log（对数）
    data: data.categoryData,
    //data指数据，这里格式为[['时间'，数据],[‘时间’，数据]]
    scale: true,
    //只在数值轴中（type: 'value'）有效
    boundaryGap: false,
    axisLine: {
    	onZero: false
    },
    splitLine: {
    	show: false   //分割线，正方形块
    },
    splitArea: {
    show: true,
    areaStyle:{
    color:['#fff','#fff']             //设置网格背景色
     }
     	}
    splitNumber: 20,min: 'dataMin',
    max: 'dataMax',
    axisPointer: {
    	z: 100
    }
    }]，
    series[{
    name: 'price',
    type: 'line',
    symbol:'none',//线设置点的样式，none为空
    	data: getPrice(data),
    	smooth: true,
    	lineStyle: {
    		normal: {
    			opacity: 0.5
    		}
    	}
    }]
    //里面存放的是曲线数据，name代表的是图形显示名称，type代表类型，data是指数据，smooth代表的是曲线是否平滑，lineStyle设置线的颜色

**网格背景颜色设置**

![70][]

**线条颜色设置**

![70 1][]

**线条背景渐变**

![70 2][]

**y轴刻度相关设置**

![70 3][]

**设置刻度值的样式**

![70 4][]

**设置是否缩放按钮**

![70 5][]

以上便是echarts里面有关line类型的配置，这些如果你能基本上掌握了，画图还是轻轻松松的。下面再给大家介绍几款专业的k线画图工具，国内的画图插件一般都是最多给大众看个走势，到了专业对比指标的时候就显得微不足道了。

[https://cn.tradingview.com/widget/advanced-chart/][https_cn.tradingview.com_widget_advanced-chart]   tradingview

[https://documentation.chartiq.com/tutorial-Library%20Tutorials.html][https_documentation.chartiq.com_tutorial-Library_20Tutorials.html]  chartiq

[https://documentation.chartiq.com/CIQ.ChartEngine.html\#zoomSet][https_documentation.chartiq.com_CIQ.ChartEngine.html_zoomSet]  chartiq文档

[70]: /images/20220520/713325643bab41a095a2cc3a718ba39e.png
[70 1]: /images/20220520/7ddbef2685614de78eac94891de9a122.png
[70 2]: /images/20220520/f290f558792d4fb5bb125d33bedfc92a.png
[70 3]: /images/20220520/1408e3e3c12645958ae9e503381661a2.png
[70 4]: /images/20220520/9687eb7e4cfa463bb20440f036e294c0.png
[70 5]: /images/20220520/6a9c389ea6884dee96711b6ce3be8fa9.png
[https_cn.tradingview.com_widget_advanced-chart]: https://cn.tradingview.com/widget/advanced-chart/
[https_documentation.chartiq.com_tutorial-Library_20Tutorials.html]: https://documentation.chartiq.com/tutorial-Library%20Tutorials.html
[https_documentation.chartiq.com_CIQ.ChartEngine.html_zoomSet]: https://documentation.chartiq.com/CIQ.ChartEngine.html#zoomSet