在 VUE 中使用 echarts

echarts 官网地址

Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/index.html需求：做一个长这样的图表

首先，我们先拥有一个图表

1. 通过 npm 安装 echarts，在项目根目录输入指令，也可以通过 CDN 或 GitHub 获取

npm install echarts --save

2. 在 main.js 中引入，并挂载到 vue 实例上

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3. 在页面中引入 echarts

import * as echarts from 'echarts'

4. 就可以使用啦！图表要有一个容纳它的容器

<div id="myChart" style="width:500px; height:500px"></div>

 2. 找到我们的容器

var myChart = echarts.init(document.getElementById('myChart'));

3. 随便找个例子就可以跑起来了

var option = {
    ...
}
myChart.setOption(option);

然后，我们就可以做一个想要的图表啦

var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
    title: {
        text: '一周RevPAR数据',
        textStyle: {
            color: '#fff',
            fontSize: 18,
        }, // 标题文字样式
        left: '35%' //标题位置
    },
    legend: {
        show: true,
        data: ['RevPAR'],
        right: 0,
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        itemStyle: {opacity: 0}
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData,
        axisLabel: {// 名称样式
            fontSize: 14,
            color: '#fff',
            interval: 0
        },
        axisTick: {show: false},  //坐标轴刻度线
        axisLine: {show: false},
        splitLine: {     //网格线
            show: true,
            lineStyle: {
                color: '#7d7d7d'
            }
        }
    },
    yAxis: {
        name: '单位：￥',
        type: 'value',
        axisLabel: {// 名称样式
            fontSize: 14,
            color: '#fff',
        },
        nameTextStyle: {
            fontSize: 14,
            color: '#fff',
            padding: 22
        },
        splitLine: {show: false}
    },
    series: [{
        name: 'RevPAR',
        type: 'line',
        stack: 'Total',
        data: yData,
        label: {
            show: true,
            position: 'top',
            color: '#fff',
            fontSize: 16
        },
        markLine: { //基准线
            silent: true,
            symbol: 'none',
            lineStyle: {
            normal: {
                color: '#FF9900',
                type: 'solid'
                }
            },
            data: [{ yAxis: this.revPAR }],
            label: {
                formatter: '华住 revPar',
                position: 'insideStartTop',
                color: '#FF9900',
                fontSize: 14
            },
        },
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
    myChart.getDom().style.height = '200px';
    myChart.getDom().style.width = '200px';
    myChart.resize();
});

写在最后，图标样式很灵活，可以做成你想要的样子，或者甲方**想做成的样子，遇到问题可以看开发文档，配置手册很丰富！