npm install echarts -S
2.在main.js中引用echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.封装chart组件(复制粘贴就好了)
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="bar" style="width: 600pxheight:400px"></div>
<div id="pie" style="width: 600pxheight:400px"></div>
<div id="line" style="width: 600pxheight:400px"></div>
在script里面写下面内容
export default{
mounted(){
this.drawLine()//调用这个方法
},
methods:{
drawLine () {
var echarts = require('echarts')
var barChart = echarts.init(document.getElementById('bar'))
var pieChart = echarts.init(document.getElementById('pie'))
var lineChart = echarts.init(document.getElementById('line'))
barChart.setOption({
title: {
text: '柱状图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["肉夹馍", "馒头", "豆沙包", "粉丝汤", "豆包", "油条"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
pieChart.setOption({
title: {
text: '饼图'
},
series: [{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data: [ // 数据数组，name 为数据项名称，value 为数据项值
{
value: 235,
name: '视频广告'
},
{
value: 274,
name: '联盟广告'
},
{
value: 310,
name: '邮件营销'
},
{
value: 335,
name: '直接访问'
},
{
value: 400,
name: '搜索引擎'
}
]
}]
})
lineChart.setOption({
title: {
text: '折线图',
},
tooltip: {},
legend: {
data: ['销量', '试穿', '退货'],
x: 'right'
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}, {
name: '试穿',
type: 'line',
data: [30, 40, 50, 20, 12, 30]
}, {
name: '退货',
type: 'line',
data: [1, 2, 1, 3, 5, 2]
}]
})
}
}
}
<div id="main" style="width: 600pxheight:400px"></div>绘图的时候会初始化两个div区域会指定大小，你看一下你2个div指定的height高度和页面的高度有没有冲突，可能是2个div的高度超过了你页面其他地方设置的height，导致只能显示出一半<body>
<input type="button" value="TestEcharts" onclick="showLine()" /><br />
<input type="button" value="RadarEcharts" onclick="showRadar()" />
<div id="stackbar" align="center"
style="height: 260pxwidth: 30%line-height: 260pxborder: 1px solid bluepadding-left: -80px">[可视化数据图例1...]</div>
<div id="radarbar" align="center"
style="height: 260pxwidth: 30%line-height: 260pxborder: 1px solid greenmargin-top: 10px">[可视化数据图例2...]</div>
分开初始化，.init(div)
function showLine() {
var echartBar = echarts.init(document.getElementById("stackbar"))
var option1 = {
title:{
text:'test',
subtext:'折线图测试',
x:'center',
y:'top',
textAlign:'center'
},
legend:{
data:['ThisWeek', 'LastWeek', 'FutureWeek'],
x: 'center',
y: 'bottom'
},
tooltip:{
//show: true, 默认添加tip即显示
trigger: 'item',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{
textStyle:{
fontSize: 8
}
}
},
yAxis: {
type: 'value',
axisLabel:{
textStyle:{
fontSize: 5
}
}
},
series: [{
name: 'ThisWeek',
type: 'line',
//xAxisIndex: 1,
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: 'LastWeek',
type: 'line',
data: [920, 832, 801, 834, 1090, 1130, 1120]
},
{
name: 'FutureWeek',
type: 'bar',
data: [520, 432, 401, 434, 690, 730, 720]
}
]
}
echartBar.hideLoading()
echartBar.setOption(option1)
}
也可以写在一个js函数中，如：
var echartBar = echarts.init(document.getElementById("stackbar"))
echartBar.showLoading()
var echartPie = echarts.init(document.getElementById("pie"))
echartPie.showLoading()
$.ajax({
url: "getFVIData.do",
type: 'GET',
cache: false,
dataType: 'json',
success: function (data) {
var option1 = { ......
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）