[JavaScript知识库]echarts的使用（待补充）

安装echarts

npm install echarts@4.8.0 --save//我的电脑适用

有些要用 npm install echarts --save 安装

在main.js注册

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

如果要删除，重新安装用

npm uninstall echarts

<template>
  <div>
    <!-- 给个容器 -->
    <div ref="myechart" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.setChart()
    },
    methods: {
      setChart() {
        //获取容器
        var myChart = this.$echarts.init(this.$refs.myechart)
        // 指定图表的配置项和数据
        var option = {
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
          }]
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      },
    },
  }
</script>

<style lang="" scoped>
</style>

获取容器->指定数据->容器和数据结合

line–折线图
bar–柱状图
areaStyle: {}–填充
//都是在serise中的