vue 使用tradingview绘制折线图，资金图，以及一些配置说明

tradingview的k线图和折线图不属于同一个项目，考虑到k线图代码量很多，折线图只是一个轻量级别的。 

tradingview官网：轻量级金融图表库 — TradingView

lightweight-charts折线图文档：https://aitrade.ga/books/lightweight-charts-docs-cn/ 

折线图代码地址：GitHub - tradingview/lightweight-charts: Financial lightweight charts built with HTML5 canvas

效果图：

1.安装。

npm install lightweight-charts

2.引入和使用。

import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });//margin: [0, 0, 0, 0] ：动态改变大小，必须取消宽高。
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

3.其他。（修改样式和线条）

        const lineSeries = chart.addLineSeries({
            color: "#c3c2d4",
            lineWidth: 1.5,
            priceLineVisible: !1,
            lastValueVisible: !1
        });
        lineSeries.createPriceLine({
            price: 0,
            axisLabelVisible: !1,
            lineWidth: 1,
            lineStyle: "",
            color: "#6f6e84"
        })

效果图：

其他：

设置百分比显示，type:'percent'；设置精度，precision：3；

代码：

const lineSeries = chart.addLineSeries({
                color: "#c8c7d8",
                lineWidth: 1.5,     //线条宽度
                priceLineVisible: !1,
                lastValueVisible: !1,
                priceFormat: {
                    type: 'percent',//百分比
                    precision: 3,//精度
                    minMove: .01
                }
            });

 设置图标y轴数据左部显示，position: "left",：

{
        margin: [0, 0, 0, 0],
        // localization: { // 设置x周时间格式
        //     dateFormat: "yyyy-MM-dd",
        // },
        localization: {
            //y轴数据显示的格式化
            priceFormatter: (a) => {
                //最终百分比显示
                return a;
                // const n = Object(x.b)(a).div("1000000").toFixed(M.d);
                // return (d()(["0.0000", "-0.0000"], n) ? "0" : n) + "%"
            },
        },
        priceScale: {
            borderVisible: !1,
            position: "left",
        },
        timeScale: {
            rightOffset: 50,//10,
        },
        grid: {
            vertLines: {
                visible: !1,
            },
            horzLines: {
                visible: !1,
            },
        },
        layout: {
            backgroundColor: "#212121", //折线图背景色
            fontFamily: "Relative Pro",
            textColor: "#6f6e84",
            fontSize: 12,
        },
        
    }

{
        
        width: 0,
        height: 0,
        layout: {
            backgroundColor: "#212121",
            fontFamily: "Relative Pro",
            textColor: "#6f6e84",
            fontSize: 12,
        },
        priceScale: {
            borderVisible: !1,
            position: "left",
        },
        crosshair: {
            //垂直鼠标线颜色
            vertLine: {
                // color: "#ff0000",
                width: 1,
                style: 3,
                visible: !0,
                labelVisible: !0,
                // labelBackgroundColor: "#ff0000"
            },
            //水平鼠标线颜色
            horzLine: {
                // color: "#ff0000",
                width: 1,
                style: 3,
                visible: !0,
                labelVisible: !0,
                // labelBackgroundColor: "#4c525e"
            },
            mode: 1
        },
        //网格线
        grid: {
            vertLines: {
                color: "#212121",
                style: 0,
                visible: !0
            },
            horzLines: {
                color: "#212121",
                style: 0,
                visible: !0
            }
        },
        // rightPriceScale: {
        //     visible: true,
        //     scaleMargins: {
        //       top: 0.3,
        //       bottom: 0.25,
        //     },
        //     borderVisible: false,
        // },
        // leftPriceScale: {
        //     visible: true,
        //     // mode: 2,
        //     scaleMargins: {
        //       top: 0.3,
        //       bottom: 0.25,
        //     },
        //     borderVisible: false,
        // },
        timeScale: {
            rightOffset: 0,
            barSpacing: 6,
            fixLeftEdge: !1,
            lockVisibleTimeRangeOnResize: !1,
            rightBarStaysOnScroll: !1,
            borderVisible: !0,
            // borderColor: "#2B2B43",
            visible: !0,
            timeVisible: !1,
            secondsVisible: !0,
            shiftVisibleRangeOnNewBar: !0,
        },
        // watermark: ui,
        localization: {
            // locale: Ue ? navigator.language : "",//语言包
            dateFormat: "dd MMM 'yy"
        },
        handleScroll: {
            mouseWheel: !0,
            pressedMouseMove: !0,
            horzTouchDrag: !0,
            vertTouchDrag: !0
        },
        handleScale: {
            axisPressedMouseMove: {
                time: !0,
                price: !0
            },
            axisDoubleClickReset: !0,
            mouseWheel: !0,
            pinch: !0
        }
    };

监听鼠标在折线图上移动：

//监听鼠标在图标上的变化
            chart.subscribeCrosshairMove((param)=> {
                if ( param === undefined || param.time === undefined || param.point.x < 0 || param.point.y < 0) {
                    // 判断当前鼠标不在图表上时，
                } else {
                    // 判断当前鼠标在图表上时，进行的处理函数
                    // console.log('图表上移动：',param)
                }

            });

自定义y轴数据的显示方式：

            lineSeries.applyOptions({
                priceFormat: {
                    type: "custom",
                    minMove: 0.02,
                    formatter: function(price) {
                        console.log(price,1)
                        return "$" + price.toFixed(3);
                    }
                }
            });

推荐文章：
轻量级金融图表 TradingView 开发 状图、面积图、折线图 一图多表，多个y轴，添加水印等功能_qinyuhua93的博客-CSDN博客

轻量级金融图表库 — TradingView