Echarts3

效果图 JSlet rst = [ { name: 'Matcha Latte', data:[ {time: '2012',num: 365}, {time: '2013',num: 815}, {time: '2014',num: 665}, {time: '2015',num: 565}, ] },{ name: 'Milk Tea', data:[ {time: '2012',num: 265}, {time: '2013',num: 615}, {time: '2014',num: 465}, {time: '2015',num: 965}, ] },{ name: 'Cheese Cocoa', data:[ {time: '2012',num: 765}, {time: '2013',num: 215}, {time: '2014',num: 765}, {time: '2015',num: 165}, ] } ]; let chartOption = { el:'#chart',//放置图表的元素css选择器 title: '市场饮料销售情况',//图表标题 unit: '吨', dataArr: rst, } /** * chtOption = { * el:'', //放置图表的元素css选择器 title: '', //图表大标题 unit: [], //单位 * } * * */ function barChart (chtOption){ let myChart = echarts.init(document.querySelector('#chart')); let dataObj = { series: [],//系列数据 xData:[],//x轴数据 yData:[],//类目数据 source: [], chartType: [], } for(let i in chtOption.dataArr[0].data){ dataObj.series.push(chtOption.dataArr[0].data[i].time); } for(let i in chtOption.dataArr){ let perSeries = []; perSeries.push(chtOption.dataArr[i].name); for(let j in chtOption.dataArr[i].data){ perSeries.push(chtOption.dataArr[i].data[j].num); } dataObj.xData.push(perSeries); dataObj.yData.push(chtOption.dataArr[i].name); } let dataSeries = ['name_value']; for(let i in dataObj.series){ dataSeries.push(dataObj.series[i]); dataObj.chartType.push({type: 'bar'}); } dataObj.source.push(dataSeries); for(let i in dataObj.xData){ dataObj.source.push(dataObj.xData[i]); } let option = { title: { text: chtOption.title, textAlign: 'left' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: chtOption.series }, grid: { left: '3%', right: '12%', bottom: '3%', top: '10%', containLabel: true }, dataset: { source: dataObj.source }, xAxis: [ { gridIndex: 0,name: '单位: ' + chtOption.unit} ], yAxis: [ {type: 'category',gridIndex: 0} ], series: dataObj.chartType }; myChart.setOption(option); } barChart(chartOption);

需求如图： 用echarts实现，代码如下，无注释。 var myChart = echarts.init(document.getElementById('main')); var x = new Array(); var optionx = new Array(); var y = new Array(); for(var i = 0; i < chartData.length; i++){ for (item in chartData[i]){ x.push(item); y.push(chartData[i][item]); } } for(var i = 0; i < x.length; i++){ var index1 = x[i].indexOf('-') + 1; optionx.push(x[i].substring(index1,x[i].length)); } // 指定图表的配置项和数据 var option = { backgroundColor: "#FCFCFC", tooltip : { backgroundColor: "#17191D", trigger: 'axis', axisPointer: { type: "none", label: { backgroundColor: '#6a7985' } }, formatter: function(params, ticket, callback) { return '<div style="padding: 5px;overflow: hidden;"><div style="display: block;font-size: 12px;line-height: 14px;margin-bottom: 6px;">'+x[params[0].dataIndex]+'</div><div style="display: block;width: 1px;height: 9px;border-radius: 3px;background-color: #1890FF;margin-top: 2.5px;float: left;"></div><div style="display: block;float: left;margin-left: 7px;font-size: 12px;line-height: 14px;">'+params[0].data+'</div></div>'; } }, grid: { top: 0, bottom: 36, left: -20, right: -20 }, xAxis :{ type : 'category', boundaryGap : false, axisLine : { show: false, lineStyle :{ color : "#C6D2DD" } }, axisLabel: { color : "#666" }, splitLine : { show: true, lineStyle :{ color : "#D7D8DA", type : "dashed" } }, axisTick : { show: false, lineStyle :{ color : "#EBEBEB" } }, data : optionx }, yAxis : { type : 'value', axisLine :{ show: false }, axisLabel : { show: false }, splitLine : { show: false }, axisTick : { show: false } }, series : [ { type:'line', stack: '总量', smooth : true, //是否平滑显示 symbolSize : 6, itemStyle : { color: "#FFD205", borderColor : "#FFD205", borderWidth : 2 }, lineStyle : { color : "#FFD205", width : 4 }, areaStyle : { color : "#FFF", origin : "end", opacity : 1 }, data:y } ] }; myChart.setOption(option);

安装依赖npm install vue-echarts --save引入依赖main.js import ECharts from 'vue-echarts/components/ECharts'Vue.component('chart', ECharts)在组件中使用echarts首先得在Script中引入需要的图表类型和参数组件<script> // 折线 import 'echarts/lib/chart/line' // 饼状图 import 'echarts/lib/chart/pie' // 柱状图 import 'echarts/lib/chart/bar' // ... // 提示 import 'echarts/lib/component/tooltip' // 图例 import 'echarts/lib/component/legend' // 标题 import 'echarts/lib/component/title' // ... export default { // ... }</script>然后就可以在<template>中使用<template> <div> <chart :options="options" :auto-resize="true"></chart> </div></template>定义动态的options参数 引号中参数可以换其他的名称data () { return { options: {} }}在页面挂载时赋值获取的options // 注意这里可以是从后台获取的，现在我们用数据模拟mounted () { this.option = { // 标题 title: { text: '某某图' x: 'center', textStyle: { color: '#fff', fontSize: 18, fontWeight: 'normal' } }, // 工具提示 tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, // 图例说明 legend: { show: true, x: 'center', bottom: 20, data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'], textStyle: { color: '#fff', fontSize: 20 } }, // 各个部分的颜色 color: ['#18DBDF', '#F6EF7B', '#3DE16F', '#EF69FB', '#FE5679'], // 拖拽的时候重新渲染 默认关闭 calculable: true, // 工具箱 toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, label: { show: true, fontSize: 20 }, series : [ { itemStyle: { normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: { show: true } } }, name:'访问来源', // 类型：这里是饼图 type:'pie', radius : '55%', center: ['50%', '60%'], // 数据 data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }}