echarts 入门

安装

npm install echarts --save

引入

1.页面全局引入

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

2.页面按需引入

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
]);

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

页面使用

// template   注意要给宽高
<template>
  <div id="cha" ref="mychart">111</div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Home",
  mounted() {
    let myEcharts = echarts.init(this.$refs.mychart);
    myEcharts.setOption({
      title: {
        text: "标题",
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",//bar
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped lang="scss">
#cha {
  width: 500px;
  height: 500px;
  border: 1px solid #aaaaaa;
  background: #f2f2f2;
  margin: 0 auto;
}
</style>