Vue + echarts 折线图各种样式设置 --持续更新

Vue 安装依赖包

npm install echarts --save

在main.js中配置echarts。

import * as echarts from 'echarts';

# 这样设置时可以在项目的任意vue文件下通过this.$echarts进行引用
Vue.prototype.$echarts = echarts;

在Demo.vue中设置折线的颜色、类型等属性

<template>
    <div id="chartDemo"></div>
</template>

<script>
    export default {
        name: "echartDemo",
        data () {
            return {}
        },
        methods: {
            initCharts () {
                let chartDemo = this.$echarts.init(document.getElementById('chartDemo'));
                chartDemo.setOption({
                    tooltip: {
                        trigger: 'axis',
                        // 自定义悬浮框展示的内容。此json对象的内容可自定义，我只是举个例子。{name: '内容标题'， value：'可以是任意字符，根据业务需求来吧'}
                        formatter(params) {
                            return `内容标题：${params[0].data.name} 数据：${params[0].data.value}`
                        }
                    },
                    // 设置折线图的大小
                    grid:{
                        x:25,
                        y:5,
                        x2:5,
                        y2:20,
                        borderWidth:1
                    },
                    xAxis: {
                        type: 'category',
                        splitLine : {
                            lineStyle: {
                                color: ['red', 'green'],  // 设置网格线颜色
                                width: 1, // 设置网格线宽度
                                type: 'dashed' //设置线的类型 虚线(dashed)、实线(solid)
                            },
                            show: true
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#FF0000', // 设置x轴线的颜色
                                type: 'dashed' // 设置x轴线的类型
                            }
                        },
                        // 测试数据，一般通过接口获取数据
                        data: ['10:05', '10:10', '10:15', '10:20', '10:25', '10:30']
                    },
                    yAxis: {
                        type: 'value',
                        min: 50, // y轴最小刻度值
                        max: 100, // y轴最大刻度值
                        splitLine : {
                            lineStyle: {
                                color: ['red', 'green'],  // 设置网格线颜色
                                width: 1, // 设置网格线宽度
                                type: 'dashed' // 设置网格虚线(dashed)、实线(solid)
                            },
                            show: true // 是否显示网格线
                        },
                        axisLine: {
                            lineStyle: {
                                // 设置y轴颜色
                                color: '#87CEFA',
                                type: 'dashed'
                            }
                        },
                    },
                    series: [{
                        data: [76, 60, 70, 80, 90, 100],
                        type: 'line',
                        smooth: true, // 是否平滑 也可以设置为 0 到 1 的值，表示平滑程度。
                        symbol: 'circle', //折线点设置为实心点
                        symbolSize: 30, // 折线点的大小,为了方便观察，设置了30
                        itemStyle : {
                            normal : {
                                color: "yellow", // 设置折线点颜色
                                lineStyle:{
                                    color:'red' // 设置折线颜色
                                }
                            }
                        },
                        markLine: {
                            silent: true,
                            lineStyle: {
                                normal: {
                                    color: '#fe1d25' // 设置安全基线颜色
                                }
                            },
                            data: [{
                                yAxis: 90 // 设置安全基线数值
                            }],
                            label: {
                                normal: {
                                    formatter: '这是安全基线' // 设置安全基线标题
                                }
                            },
                        }
                    }]
                });
            }
        },
        created() {
            this.initCharts()
        }
    }
</script>

<style scoped>

</style>