vue使用Echarts vue使用Echarts滚动条
前端
最近公司一个项目需要绘制图标,数据很多都要放在一张图标上面,说起图标肯定先想到Echarts , 刚好Echarts也配置了滚动条.下面分享一下
github:
npm安装:
npm install echarts -Smain.js 配置:
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
项目中:引入:
let echarts = require('echarts/lib/echarts')这样全局引入 打包 项目会很大;
可以再demo里单独引入:需要哪个模块引入哪个模块
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/dataZoom')
require('echarts/lib/component/dataset')Echarts:色彩包
import macarons from 'echarts/theme/macarons'项目中
script>
let echarts = require('echarts/lib/echarts')
export default {
name: 'hello',
data() {
return {
data: []
mounted() {
this.drawLine();
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
show: true
dataView: {
show: true,
readOnly: false
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
restore: {
show: true
saveAsImage: {
show: true
calculable: true,
xAxis: [{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
yAxis: [{
type: 'value'
series: this.data, // 这里就放后台传过来的数据
dataZoom: [{ // 这是滚动条插件 可以是Y轴 也可以是X轴
type: 'inside',
start: 0,
end: 20
start: 0,
end: 20, //位置 下面这个是 自定义图标 格式可以是base64 url inco 格式
handleIcon: 'd="M625.353 69.801L844.722 343.814c0 0 11.085 102.239-87.737 59.17-57.017-25.586-77.367-79.29799999-77.367-79.298l-2.043 417.39c0 0-58.947 87.901-110.234 0l-0.934-264.25399999c0 0-63.75 86.74199999-138.747-6.064 0 0-56.248 94.518-135.27-4.57700001 0 0-56.03 109.298-112.278-9.485l0-331.75c0 0 3.25599999-25.862 48.862-55.145L625.353 69.801 625.353 69.801zM625.353 69.801"',
handleSize: '80%', // 图标大小
handleStyle: { // 图标样式
color: '#fff',
shadowBlur: 3,
shadowOffsetX: 4,
shadowOffsetY: 2,
transform: "rolate(90deg)" // 图标旋转
created() {
// 在created 里面 直接调用 this.drawLine(); 回报这个错误 因为这里时候echarts还没有加载出来 created hook: "TypeError: Cannot read property 'getAttribute' of null"
/* axios.post('*********', ).then(res => { */
var arr = [] // 在这里把数据过滤成Ehcarts 需要的格式
for (var i = 0; i < 10; i++) {
var json = {
name: '视频广告' + i,
type: 'bar',
stack: '广告',
data: [150 + i, 2 - i, 20 * i, 154 - 100, 19 - 8, 30, 40]
arr.push(json)
this.data = arr
// 主要 echarts不能v-if 也会报错