【前端】Echarts使用 三纵坐标

环境:vue2
如果是npm替换一下yarn即可

yarn add echarts@^4.9.0

main.js中引入

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
Vue.use(echarts);

弄个demo.vue 参考如下

<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="17">
        <el-card>
          <div id="lucky_chart" style="min-height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
      chartLine: null,
      chartBar: null,
      chartPie: null,
      chartScatter: null,
    }
  },
  mounted() {
   
    this.initLuckyChart()
  },

  methods: {
   
    initLuckyChart() {
   
      let xLabel = ['8:05', '8:10', '8:15', '8:25', '8:30', '8:35', '8:40', '8:45', '8:55', '9:00', '9:05', '9:10']
      let dataValue = [120, 130, 140, 135, 134, 115, 156, 115, 

你可能感兴趣的:(前端,前端,echarts,javascript)