Vue.js引入echarts、elementUI、museUI、mintUI-CSDN博客

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>


<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>
出来的效果就是这样的