Vue.js引入echarts、elementUI、museUI、mintUI

https://blog.csdn.net/xm_w_xm/article/details/81982933

不知道怎么建立项目的可以看上一篇

下载elementUI

npm install element-ui -s
下载echarts组件 

npm install echarts --save
 

首先在我们的项目下cmd下载elementUI，下载完成后我们在这个文件下可以查看

 我们在main.js下引用我们下载的

import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import echarts from 'echarts'
Vue.use(elementui)
Vue.use(echarts)
Vue.prototype.$echarts=echarts
这样我们就可以用了直接上页面

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
  <div>
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
  </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
   
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    },
DrawChartright() {
      let Chartright = this.$echarts.init(
        document.getElementById("Chartright")
      );
      // 绘制图表
      Chartright.setOption({
        title: { text: "面积" },
        tooltip: {},
        xAxis: {
          // data: ["类型1", "类型2", "类型3", "类型4", "类型5", "类型6", "类型7"]
          data: this.X_tjlist
        },
        yAxis: {},
        legend: {
          x: "right",
          orient: "vertical",
          // data: ["类型1", "类型2", "类型3", "类型4", "类型5", "类型6", "类型7"]
          data: this.X_tjlist
        },
        series: [
          {
            name: "销量",
            type: "bar",
            // data: [5, 20, 36, 10, 10, 20, 25],
            data:this.Y_tjlist,
            itemStyle: {
              normal: {
                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
 
                color: function(params) {
                  // build a color map as your need.
 
                  var colorList = [
                    "#32c5e9",
                    "#9fe6b8",
                    "#ffdb5c",
                    "#ff9f7f",
                    "#fb7293",
                    "#e7bcf3",
                    "#8378ea"
                  ];
 
                  return colorList[params.dataIndex];
                }, //以下为是否显示，显示位置和显示格式的设置了
 
                label: {
                  show: true,
                  position: "top",
                  formatter: "{b}\n{c}"
                }
              }
            }
          }
        ]
      });
    },
DrawChartleft() {
      let Chartleft = this.$echarts.init(document.getElementById("Chartleft"));
      // 绘制图表
      Chartleft.setOption({
        // title: {
        //   text: "空间数据统计",
        //   x: "left"
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        calculable: true,
        series: [
          {
            name: "数据模式",
            type: "pie",
            radius: [30, 110],
            center: ["75%", "50%"],
            roseType: "area",
            data: [
              { value: 10, name: "类型1", itemStyle: { color: "#32c5e9" } },
              { value: 5, name: "类型2", itemStyle: { color: "#9fe6b8" } },
              { value: 15, name: "类型3", itemStyle: { color: "#ffdb5c" } },
              { value: 25, name: "类型4", itemStyle: { color: "#ff9f7f" } },
              { value: 20, name: "类型5", itemStyle: { color: "#fb7293" } },
              { value: 35, name: "类型6", itemStyle: { color: "#e7bcf3" } },
              { value: 30, name: "类型7", itemStyle: { color: "#8378ea" } }
            ]
          }
        ]
      });
    },
  },
  mounted(){
    this.drawLine();
  },
  
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
出来的效果就是这样的

 

npm install muse-ui -s

import museui from 'muse-ui'
import 'muse-ui/dist/muse-ui.css';
Vue.use(museui)
npm i mint-ui -S

import mintui from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(mintui)