效果图

背景图片

下载ECharts

npm install echarts --save

引入并注册全局ECharts

在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import echarts from 'echarts'
Vue.prototype.$echarts = echartsVue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

在组件中使用ECharts

<template><div class='wrapper'><div class='chart' id='chart'></div></div>
</template><script>
export default {data () {return {}},mounted () {this.drawChart()},methods: {drawChart () {let datas = [0,0,1,1,0,1]// 基于准备好的dom，初始化echarts实例const chart = this.$echarts.init(document.getElementById('chart'))// 监听屏幕变化自动缩放图表window.addEventListener('resize', function () { chart.resize() })// 绘制图表chart.setOption({color: ['#74d1fd', '#009ae4', '#0071c1'],// 设置图表的位置grid: {x: 40, // 左间距y: 60, // 上间距x2: 10, // 右间距y2: 30, // 下间距containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景},// 提示框组件tooltip: {trigger: 'axis', // 触发类型, axis: 坐标轴触发axisPointer: {// 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。// 其实是种简写，表示启用两个正交的轴的 axisPointer。type: 'none' },textStyle: {color: '#cdd3ee' // 文字颜色},// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式// 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）formatter: '{b}<br />{a0}: {c0}%'},// 图例组件legend: {textStyle: { // 文本样式fontSize: 16,color: '#cdd3ee'},top: 20, // 定位selectedMode: false, // 取消图例上的点击事件data: ['订单转化率'] // 图例的数据数组},// X轴xAxis: {type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据// 坐标轴刻度axisTick: {show: false // 是否显示坐标轴刻度 默认显示},// 坐标轴轴线axisLine: { // 是否显示坐标轴轴线 默认显示show: false // 是否显示坐标轴轴线 默认显示},// 坐标轴在图表区域中的分隔线splitLine: {show: false // 是否显示分隔线。默认数值轴显示},// 坐标轴刻度标签axisLabel: {show: false // 是否显示刻度标签 默认显示}},yAxis: [// 左侧Y轴{type: 'category', // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据// 坐标轴刻度axisTick: {show: false // 是否显示坐标轴刻度 默认显示},// 坐标轴轴线axisLine: { // 是否显示坐标轴轴线 默认显示show: false, // 是否显示坐标轴轴线 默认显示lineStyle: { // 坐标轴线线的颜色color: '#cdd3ee'}},// 坐标轴在图表区域中的分隔线splitLine: {show: false // 是否显示分隔线。默认数值轴显示},// 坐标轴刻度标签axisLabel: {show: true, // 是否显示刻度标签 默认显示fontSize: 16, // 文字的字体大小color: '#cdd3ee', // 刻度标签文字的颜色// 使用字符串模板，模板变量为刻度默认标签 {value}formatter: '{value}'},data: ['北京店', '上海店', '广州店', '深圳店', '杭州店', '厦门店'] // 类目数据，在类目轴（type: 'category'）中有效},// 右侧Y轴{type: 'category', // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据// 坐标轴轴线axisLine: {show: false},// 坐标轴刻度axisTick: {show: false},// 坐标轴刻度标签axisLabel: {show: true, // 是否显示刻度标签 默认显示fontSize: 16, // 文字的字体大小color: '#cdd3ee', // 刻度标签文字的颜色margin: 10, // 刻度标签与轴线之间的距离// 使用字符串模板，模板变量为刻度默认标签 {value}formatter: '{value}%'},data: [65, 30, 40, 60, 45, 70] // 类目数据，在类目轴（type: 'category'）中有效},// 右侧Y轴 图形{// 坐标轴轴线axisLine: {show: false},// 坐标轴刻度axisTick: {show: false},// 坐标轴刻度标签axisLabel: {margin: 50, // 刻度标签与轴线之间的距离formatter: function (value, index) {if (datas[index] === 0) {return '{idx|}';} else if (datas[index] === 1) {return '{idx1|}';}},rich: {idx: {padding: [0, 0, 4, 0], // 可以自行调整backgroundColor: { // 必须是base64格式的图片image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADt...'}},idx1: {padding: [0, 0, 4, 0], // 可以自行调整backgroundColor: { // 必须是base64格式的图片image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADt...'}}}},data: [65, 30, 40, 60, 45, 70] // 类目数据，在类目轴（type: 'category'）中有效}],// 系列列表series: [{type: 'bar', // 系列类型name: '订单转化率', // 系列名称, 用于tooltip的显示, legend 的图例筛选barMaxWidth: 10, // 柱条的最大宽度，不设时自适应showBackground: true, // 是否显示背景色// 图形上的文本标签label: {show: false,// 标签的位置 left right bottom top inside，绝对的像素值 position: [10, 10]，相对的百分比 position: ['50%', '50%']position: 'inside' },// 图形样式itemStyle: {color: {type: 'linear',x: 0,y: 1,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#1089E7' // 0% 处的颜色},{offset: 1,color: '#56D0E3' // 100% 处的颜色}]},barBorderRadius: [0, 5, 5, 0] // 柱状图圆角},data: [65, 30, 40, 60, 45, 70] // 系列中的数据内容数组},// 背景{type: 'bar', // 系列类型name: '背景', // 系列名称, 用于tooltip的显示, legend 的图例筛选// 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。// 这在用柱子做背景的时候有用barGap: '-100%', barMaxWidth: 10, // 柱条的最大宽度，不设时自适应itemStyle: {normal: {color: "rgba(28, 128, 213, 0.19)"}},data: [100, 100, 100, 100, 100, 100]},// 发光小圆点{type: 'pictorialBar', // 系列类型name: '圆点', // 系列名称, 用于tooltip的显示, legend 的图例筛选symbol: 'circle', // 标记的图形symbolSize: 14, // 标记的大小symbolOffset: [0, 0], // 标记的偏移symbolPosition: 'end', // 标记的位置// 图形的样式itemStyle: {color: '#fff',borderColor: '#56D0E3', // 阴影边框颜色shadowColor: '#56D0E3', // 阴影颜色shadowBlur: 10, // 图形阴影的模糊大小shadowOffsetX: 1 // 阴影水平方向上的偏移距离},z: 10, // 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖data: [65, 30, 40, 60, 45, 70] // 系列中的数据内容数组}]})}}
}
</script><style scoped>
.wrapper {width: 100%;
}
.wrapper .chart {width: 60%;height: 400px;margin: 100px auto 0;background: url(../../public/static/bg.png) no-repeat;background-size: 100% 100%;
}
</style>

ECharts之横向柱状图二相关推荐

echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
【echarts】横向柱状图（条形图）渐变色，手把手教学
通常的柱状图渐变色非的简单 series: [{type: 'bar',data: this.rank.num,barWidth: '10%',itemStyle: {color: {type: ' ...
echarts 实现横向柱状图格子
使用百度echarts实现图标样式,要求,20GP是40GP的一半实现后效果,代码还没完全调整完,不过图标的基本样式已经差不多了 echarts代码 ,随便找个例子贴一下就行Examples - A ...
用Java制作左右横向柱状图_横向柱状图
Echarts绘制横向柱状图(圆角+渐变) var myChart = echarts.init(document.getElementById('main'));//初始化数据 var catego ...
echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用. head中引入js文件: <script src="/static/frame/echarts/echarts.min. ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
echarts 折线图 + 柱状图
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
堆叠横向柱状图顶部显示数值和
效果图不想写太多过不了审核下面代码 // num num1 num2 在全局定义 let num = 0 option = {tooltip: {trigger: "axis" ...

ECharts之横向柱状图二

效果图

背景图片

下载ECharts

引入并注册全局ECharts

在组件中使用ECharts

ECharts之横向柱状图二相关推荐

最新文章

热门文章