Echarts 最简单创建柱状图

简介: Echarts 最简单创建柱状图

设置容器

<div ref="myChart" style="width: 500px; height: 500px;">
</div>
mounted() {
      //document渲染完成
      this.draw()
    }
draw() {
        const myChart = this.$echarts.init(this.$refs.myChart)
        //初始化对象
        myChart.setOption({ //参数配置项
          title: {
            text: '简单创建柱形图',//图表标题
            top: 'top', //顶部
            left: 'center'//居中
          }, xAxis://设置x轴数据
          {
            data: ['华为', '小米', '苹果', '三星', '酷派']
            //设置数据
          }, yAxis://设置y轴数据
          {
          }, series: {//图表配置项 如大小,图表类型
            name: '图表名字',
            type: 'bar',//图表类型
            data: [1201, 589, 2789, 927, 281]
            //图表值
          }
        })
      }

效果

相关文章
|
6月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
218 0
|
JSON 前端开发 数据格式
【前端统计图】echarts实现简单柱状图
【前端统计图】echarts实现简单柱状图
87 0
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
311 0
|
28天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
358 0
|
3月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
131 0
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
358 0
|
5月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
72 0
|
12月前
echarts设置柱状图柱状图粗细大小
echarts设置柱状图柱状图粗细大小
223 1
|
12月前
|
BI
echarts柱状图实现颜色渐变效果
echarts柱状图实现颜色渐变效果
220 1
|
6月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色