鸿蒙应用开发JS-chart数据分享体验 原创

chart小案例，在生活中图表的展示出来的数据直观、形象、生动、具体等特点。

Html代码：

<!-- xxx.hml -->
<div class="container">
    <text>线型图</text>
    <stack class="chart-region">
        <image class="chart-background" src="/image/tiaoxing.png"></image>
        <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
    </stack>
    <button value="Add data" onclick="addData"></button>
    <text style="margin-top: 50px;">柱形图</text>
    <stack class="data-region">
        <image class="data-background" src="/image/tiaoxing.png"></image>
        <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
    </stack>
    <text style="margin-top: 50px;">量规图</text>
    <div class="gauge-region">
        <chart class="data-gauge" type="gauge" percent = "50"></chart>
    </div>
</div>

Css样式：

/* xxx.css */
.container {
    flex-direction: column;
    align-items: center;
}
.chart-region {
    height: 400px;
    width: 700px;
}
.chart-background {
    object-fit: fill;
}
.chart-data {
    width: 700px;
    height: 600px;
}
.data-region {
    height: 400px;
    width: 700px;
}
.data-bar {
    width: 700px;
    height: 400px;
}
.data-background {
    object-fit: fill;
}
.gauge-region {
    height: 400px;
    width: 400px;
}
.data-gauge {
    colors: #83f115, #3bf8ff, #fd3636;
    weights: 1, 1, 1;
}

Js代码：

// xxx.js
export default {
    data: {
        lineData: [
                {
                    strokeColor: '#0081ff',
                    fillColor: '#cce5ff',
                    data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
                    gradient: true,
                }
        ],
        barData: [
                {
                    fillColor: '#f07826',
                    data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
                },
                {
                    fillColor: '#cce5ff',
                    data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
                },
                {
                    fillColor: '#ff88bb',
                    data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
                },
        ],
        barOps: {
            xAxis: {
                min: 0,
                max: 20,
                display: false,
                axisTick: 10,
            },
            yAxis: {
                min: 0,
                max: 1000,
                display: false,
            },
        },
        lineOps: {
            xAxis: {
                min: 0,
                max: 20,
                display: false,
            },
            yAxis: {
                min: 0,
                max: 1000,
                display: false,
            },
            series: {
                lineStyle: {
                    width: "5px",
                    smooth: true,
                },
                headPoint: {
                    shape: "circle",
                    size: 20,
                    strokeWidth: 5,
                    fillColor: '#ffffff',
                    strokeColor: '#007aff',
                    display: true,
                },
                loop: {
                    margin: 2,
                    gradient: true,
                }
            }
        },
    },
    addData() {
        this.$refs.linechart.append({
            serial: 0,
            data: [Math.floor(Math.random() * 400) + 400]
        })
    }
}

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/JS_chart