vuex项目中使用Echarts示例

npm 安装 ECharts

npm install echarts --save

引入 echarts

import * as echarts from "echarts";

 mounted() {
var myChart = echarts.init(document.getElementById("main"));
// 基于准备好的dom，初始化echarts实例 // 通过 document.getElementById("main") 获取原生dom ，项目中有多个图表时，须使用不同的 id 

// var myChart = echarts.init(this.$refs.main);;
/ 通过 ref 获取dom ，不同于上面， ref 作用于这个组件实例内，保证 ref 在这个组件实例中是唯一的即可
myChart.setOption({
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  xAxis: {
    axisLabel: {
      /* 显示所有的x轴的数据 */
      interval: 0,
      /* 放不下的倾斜角度 */
      rotate: 0,
      /* 数据距离刻度线的距离 */
      margin: 15,
    },
    data: ["羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [
        {
          value: 735,
          name: "羊毛衫",
          itemStyle: {
            color:{
                type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 0.5, color: 'yellow' // 50% 处的颜色
                    },
                    {
                        offset: 1, color: 'green' // 100% 处的颜色
                    }
                    ],
            }
          },
        },
        { value: 580, name: "雪纺衫" },
        { value: 484, name: "裤子 " },
        { value: 300, name: "高跟鞋 " },
        { value: 300, name: "袜子 " },
      ],
    },
  ],
});
            window.BarChart = myChart;    
    // 将柱状图echarts实例挂载到window下，通过window.onresize函数实现柱状图能自适应浏览器窗口大小的变化
},

// 使柱状图能自适应浏览器窗口大小的变化